SwiftUI 中的自定义交叉阴影线背景形状或视图

Question

我正在尝试创建阴影交叉阴影线。但到目前为止我可以通过添加图像来做到这一点。

如何创建自定义视图，在其中绘制线条而不用图像填充？

import SwiftUI

struct ContentView: View {

    var body: some View {
        ZStack {
            Image("lineFilledBG").resizable().clipShape(Circle())
            Circle().stroke()
            Circle().foregroundColor(.yellow).opacity(0.3)
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这就是现在的样子。希望在另一个视图或形状之上绘制线条，而不添加不透明度和图像图案填充。

Answer 1

感谢Cenk Bilgen提供的条纹图案。进行了一些调整，以便您可以将舱口旋转为任何形状。

import SwiftUI
import CoreImage.CIFilterBuiltins

extension CGImage {

    static func generateStripePattern(
        colors: (UIColor, UIColor) = (.clear, .black),
        width: CGFloat = 6,
        ratio: CGFloat = 1) -> CGImage? {

    let context = CIContext()
    let stripes = CIFilter.stripesGenerator()
    stripes.color0 = CIColor(color: colors.0)
    stripes.color1 = CIColor(color: colors.1)
    stripes.width = Float(width)
    stripes.center = CGPoint(x: 1-width*ratio, y: 0)
    let size = CGSize(width: width, height: 1)

    guard
        let stripesImage = stripes.outputImage,
        let image = context.createCGImage(stripesImage, from: CGRect(origin: .zero, size: size))
    else { return nil }
    return image
  }
}

extension Shape {

    func stripes(angle: Double = 45) -> AnyView {
        guard
            let stripePattern = CGImage.generateStripePattern()
        else { return AnyView(self)}

        return AnyView(Rectangle().fill(ImagePaint(
            image: Image(decorative: stripePattern, scale: 1.0)))
        .scaleEffect(2)
        .rotationEffect(.degrees(angle))
        .clipShape(self))
    }
}

及用法

struct ContentView: View {

    var body: some View {
        VStack {
            Rectangle()
                .stripes(angle: 30)
            Circle().stripes()
            Capsule().stripes(angle: 90)
        }
    }
}

输出图片链接