同时使用 Angular 和 RadialGradient答案

【问题标题】：Angular and RadialGradient at the same time同时使用 Angular 和 RadialGradient
【发布时间】：2020-05-29 14:03:09
【问题描述】：

我一直在尝试用这样的 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 填充一个圆圈。

【问题讨论】：

很抱歉，目前无法使用 SwiftUI。当 ShapeStyle 协议有一个公共 API 时，它可能会改变。您必须要求 Apple ...
也许你可以玩 .blendMode ，看看我的回答

标签： swift swiftui cagradientlayer radial-gradients

【解决方案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)
        }
    }
}

结果

【讨论】：