Swift 中的亮度饱和度圆形垫

Question

序言

我正在尝试使用 SwiftUI 创建一个圆形亮度饱和度垫，既用于指示（从给定颜色，显示光标位置）又用于使用（通过移动光标，获取结果颜色）。

我为我糟糕的英语道歉。

演示代码

首先，我使用两个 Circle 元素绘制圆形，并填充 LinearGradient 元素和亮度平淡模式。

    public var body: some View {
        ZStack(alignment: .top) {
            //MARK: - Inner Color circle
            Group {
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [self.minSaturatedColor, self.maxSaturatedColor],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [.white, .black],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                    .blendMode(.luminosity)
            }
            .frame(width: self.diameter, height: self.diameter, alignment: .center)
            .gesture(
                DragGesture(minimumDistance: 0, coordinateSpace: .local)
                    .onChanged(self.updateCursorPosition)
                    .onEnded({ _ in
                        self.startIndication = nil
                        self.changed(self.finalColor)
                    })
            )

            //MARK: - Indicator

            Circle()
                .stroke(Color.black, lineWidth: 2)
                .foregroundColor(Color.clear)
                .frame(width: self.cursorDiameter, height: self.cursorDiameter, alignment: .center)
                .position(cursorPosition)
        }
        .frame(width: self.diameter, height: self.diameter, alignment: .center)
    }

理论

这是关于颜色饱和度与亮度混合的理论。

我不确定这是正确的方法，但看起来是这样，因为它产生了以下具有（可能）所有色调的圆圈：

问题 1

我用来确定光标位置（从给定颜色）的简化代码是：

    public var cursorPosition: CGPoint {
        let hsb = self.finalColor.hsba
        let x: CGFloat = hsb.saturation * self.diameter
        let y: CGFloat = hsb.brightness * self.diameter 

        // Adjust the Apple reversed ordinate
        return CGPoint(x: x, y: self.diameter - y)
    }

不幸的是，这似乎不正确，因为通过给出某种颜色（即#bd4d22) 它使指针放置在错误的位置。

问题 2

还有另一个问题：组件应该允许移动光标，从而使用正确的亮度和饱和度更新 finalColor State 属性。

    private func updateCursorPosition(_ value: DragGesture.Value) -> Void {
        let hsb = self.baseColor.hsba
        
        let saturation = value.location.x / self.diameter
        let brightness = (0 - value.location.y + self.diameter) / self.diameter
        
        self.finalColor = Color(
            hue: hsb.hue,
            saturation: saturation,
            brightness: brightness
        )
    }

但结果并不是预期的，因为即使光标跟随该点（意味着计算值是正确的），所得的颜色也不是在指针后面呈现的颜色！

示例 pt. 1

在这里，正如您所看到的，完全饱和的颜色（理论上应该是圆周的 2π）是不正确的。

示例 pt. 2

在这里，正如您所看到的，走出圆圈就会出现问题。

问题

1. 谁能解释一下我哪里失败了？
2. 如果光标被拖出圆圈，任何人都可以帮助我阻止 updateCursorPosition 结果颜色值吗？
3. 我是否以错误的方式做其他事情？

谢谢大家的耐心等待

Answer 1

好吧，这花了一段时间，因为这不是一回事。我最终将您的代码拆开并更简单地重建它，并从颜色视图中重构了指示器。为了修复该指标，我从这个答案中获得了灵感。给它一个碰撞。

至于色轮本身，我将其简化为一个 Circle() 并叠加了第二个 Circle()。由于我不是设计师，所以直接确定颜色需要花费更多时间，因此我不得不不太直观地处理颜色。在处理这个问题时，我有两个认识。

为了处理最大和最小饱和度，唯一可以使用的变量是色调。亮度和饱和度是固定的，饱和度为 0 或 1，亮度为 1，否则基色渐变关闭。

这导致我必须处理亮度梯度。颜色已经处于最大亮度，因此从白色到黑色的渐变渲染再次错误。我的另一个认识是亮度渐变应该从透明到黑色。这样就解决了颜色问题。代码如下并注释。

色轮：

struct ColorWheelView: View {
    
    @State private var position: CGPoint
    @Binding public var selectedColor: Color
    
    private var saturation: CGFloat {
        position.x / diameter
    }
    private var brightness: CGFloat {
        (diameter - position.y) / diameter
    }
    
    private let diameter: CGFloat
    private let cursorDiameter: CGFloat
    
    private let baseHSB: (hue: Double, saturation: Double, brightness: Double, alpha: Double)
    private let minSaturatedColor: Color
    private let maxSaturatedColor: Color
    
    public init(
        //there needs to be an intitial fixed color to set the hue from
        color: Color,
        //this returns the selected color. It can start as anything as it is set to
        //color in .onAppear()
        selectedColor: Binding<Color>,
        diameter: CGFloat = 200,
        cursorDiameter: CGFloat = 20
    ) {
        let hsb = color.hsba
        // Because the view uses the different parts of color, it made sense to just have
        // an hsba here. I would consider making this its own Type just for readability.
        // The only thing that this entire variable is used for is setting the initial selected
        // color. Otherwise I could have just kept the hue.
        baseHSB = Color(hue: color.hsba.hue, saturation: color.hsba.saturation, brightness: color.hsba.brightness).hsba
    
        // This sets the initial indicator position to be at the correct place on the wheel as
        //The initial color sent in, including the initial saturation and brightness.
        _position = State(initialValue: CGPoint(x: hsb.saturation * diameter, y: diameter - (hsb.brightness * diameter)))
        // This is the return color.
        _selectedColor = selectedColor
        // self is only needed to avoid confusion for the compiler.
        self.diameter = diameter
        self.cursorDiameter = cursorDiameter
        // Note these are set to maximum brightness.
        minSaturatedColor = Color(hue: baseHSB.hue, saturation: 0, brightness: 1)
        maxSaturatedColor = Color(hue: baseHSB.hue, saturation: 1, brightness: 1)
    }
    
    
    var body: some View {
        VStack {
        Circle()
            .fill(
                LinearGradient(
                    colors: [self.minSaturatedColor, self.maxSaturatedColor],
                    startPoint: .leading,
                    endPoint: .trailing
                )
            )
            .overlay(
                Circle()
                    .fill(
                        LinearGradient(
                            // Instead of a gradient of white to black, this is clear to black
                            // as the saturation gradients are at maximum brightness already.
                            colors: [.clear, .black],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                    .blendMode(.luminosity)
            )
            .overlay(
                IndicatorView(position: $position, diameter: diameter, cursorDiameter: cursorDiameter)
            )
            .frame(width: self.diameter, height: self.diameter)
            .onAppear {
                // Sets the bound color to the original color.
                selectedColor = Color(hue: baseHSB.hue, saturation: baseHSB.saturation, brightness: baseHSB.brightness, opacity: baseHSB.alpha)
            }
            .onChange(of: position) { _ in
                // When position changes, this changes the saturation and brightness.
                selectedColor = Color(
                    hue: baseHSB.hue,
                    saturation: saturation,
                    brightness: brightness
                )
            }
        }
    }
}

指示器：

struct IndicatorView: View {
    
    @Binding var position: CGPoint
    private let diameter: CGFloat
    private let cursorDiameter: CGFloat
    private let radius: CGFloat
    private let center: CGPoint
    
    init(position: Binding<CGPoint>, diameter: CGFloat, cursorDiameter: CGFloat) {
        _position = position
        self.diameter = diameter
        self.cursorDiameter = cursorDiameter
        self.radius = diameter / 2
        // the center of the circle is the center of the frame which is CGPoint(radius, radius)
        self.center = CGPoint(x: radius, y: radius)
    }
    var body: some View {
        VStack {
            Circle()
                // This circle is simply to keep the indicator aligned with the ColorWheelView
                .fill(Color.clear)
                .overlay(
                    Circle()
                        .stroke(Color.black, lineWidth: 2)
                        .foregroundColor(Color.clear)
                        .frame(width: cursorDiameter, height: self.cursorDiameter)
                        .position(position)
                        .gesture(DragGesture()
                            .onChanged { value in
                                updatePosition(value.location)
                            }
                        )
                )
                .frame(width: diameter, height: diameter)
        }
        .onAppear {
            updatePosition(position)
        }
    }
    
    private func updatePosition(_ point: CGPoint) {
        let currentLocation = point
        let center = CGPoint(x: radius, y: radius)
        let distance = center.distance(to:currentLocation)
        // This triggers if the drag goes outside of the circle.
        if distance > radius {
            let overDrag = radius / distance
            //These coordinates are guaranteed inside of the circle.
            let newLocationX = (currentLocation.x - center.x) * overDrag + center.x
            let newLocationY = (currentLocation.y - center.y) * overDrag + center.y
            self.position = CGPoint(x: newLocationX, y: newLocationY)
        }else{
            self.position = point
        }
    }
}
    

extension CGPoint {
    //This is simply the Pythagorean theorem. Distance is the hypotenuse.
    func distance(to point: CGPoint) -> CGFloat {
        return sqrt(pow((point.x - x), 2) + pow((point.y - y), 2))
    }
}

此外，作为旁注，您拥有的大多数变量都是常量，应该是 let 而不是 vars。结构内部的任何内容都应该是私有的。 @State 变量始终是私有的。