SwiftUI中的自定义交叉阴影背景形状或视图 [英] Custom cross-hatched background shape or view in SwiftUI

问题描述

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

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

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()
    }
}

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

推荐答案

感谢条带图案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)
        }
    }
}

Output image link

这篇关于SwiftUI中的自定义交叉阴影背景形状或视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！