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

с результатом