Angular 和 RadialGradient 同时

Question

我一直在尝试用这样的 HSB 颜色创建色轮：

var gradient: Gradient {
    return Gradient(stops: stride(from: 0, to: 1, by: 0.01).map { value in
        let color = Color(hue: value, saturation: 1, brightness: 1)
        return Gradient.Stop(color: color, location: CGFloat(value))
    })
}

 Circle()
 .fill(AngularGradient(gradient: gradient, center: .center))
 .frame(width: 300, height: 300, alignment: .center)

目前我有一个固定的饱和度值，因为这需要 RadialGradient 颜色为白色（饱和度 = 0）和计算颜色（饱和度 = 1）。但是在 SwiftUI 中你只能填充一次 Shape 所以我想知道是否有一种干净的方法可以同时用 AngularGradient 和 RadialGradient 填充一个圆圈。

Answer 1

尝试使用 .blendMode(...)

我不是颜色方面的专家所以这只是一个想法..

struct ContentView: View {
    var gradient0: Gradient {
        return Gradient(stops: stride(from: 0, to: 1, by: 0.05).map { value in
            let color = Color(hue: value, saturation: 1, brightness: 1)
            return Gradient.Stop(color: color, location: CGFloat(value))
        })
    }
    var gradient1: Gradient {
        return Gradient(stops: stride(from: 0, to: 1, by: 0.05).map { value in
            let color = Color(.displayP3, white: value, opacity: 1)
            return Gradient.Stop(color: color, location: CGFloat(value))
        })
    }
    var body: some View {
        ZStack {
            Color.black
            ZStack {

                Circle().fill(RadialGradient(gradient: gradient1, center: .center, startRadius: 0, endRadius: 200))

                Circle().fill(AngularGradient(gradient: gradient0, center: .center))
                    .blendMode(.multiply)

            }
            .frame(width: 400, height: 400, alignment: .center)
        }
    }
}

结果

Angular 和 RadialGradient 同时

Angular and RadialGradient at the same time

radial-gradients

cagradientlayer

swift

swiftui