使用 CAGradientLayer 重现草图渐变的正确方法

Question

我想创建一个具有四种给定颜色的渐变图层。我有一个渐变的草图文件。我有色标的坐标。我计算了 CAGradientLayer 起点和终点的标准化坐标。我还计算了颜色相互变化的位置。该图层仍然与草图图像不匹配。你能帮我看看有什么问题吗？导出图像的使用不是一种选择，因为图层必须随动画更改为其他渐变位置。

let imageWidth: CGFloat = 375.0
let imageHeihgt: CGFloat = 293.0

class ViewController: UIViewController {

    let homeColors: [UIColor] = [UIColor(red: 62/255, green: 131/255, blue: 255/255, alpha: 1.0),
                                 UIColor(red: 99/255, green: 22/255, blue: 203/255, alpha: 1.0),
                                 UIColor(red: 122/255, green: 5/255, blue: 239/255, alpha: 1.0),
                                 UIColor(red: 122/255, green: 5/255, blue: 240/255, alpha: 1.0)]

    let startPoint: CGPoint = CGPoint(x: -0.225/imageWidth*UIScreen.main.bounds.width, y: -0.582*imageHeihgt/UIScreen.main.bounds.height)
    let endPoint: CGPoint = CGPoint(x: 1.088/imageWidth*UIScreen.main.bounds.width, y: 1.01*imageHeihgt/UIScreen.main.bounds.height)

    let locations: [NSNumber] = [0.0, 0.734, 0.962, 1.0]

    var subview: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        subview = UIView(frame: CGRect(x: 0, y: 20, width: imageWidth, height: imageHeihgt))
        view.addSubview(subview)
        view.sendSubview(toBack: subview)
        addGradientLayer()
    }

    func addGradientLayer() {
        let gradient = CAGradientLayer()
        gradient.frame = subview.bounds
        gradient.colors = homeColors.map { $0.cgColor }
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.locations = locations
        subview.layer.insertSublayer(gradient, at: 0)
    }
}

我附上了一些屏幕截图以明确区别。这不是一个很大的区别，但仍然。

Answer 1

Sketch 渲染图形的方式与 iOS 不同。即使您完美匹配颜色和位置，最终结果仍然会有所不同。

如果您想要与 Sketch 文件完全匹配，则需要对颜色进行一些光学调整以解决差异。您的两张图像非常接近，因此通过一些细微的颜色调整，它看起来应该更接近。

尝试让浅蓝色（左上）和浅紫色（右下）不那么鲜艳。我无权访问您的 Sketch 文件，因此我无法建议新颜色来获得精确匹配，但这应该不会太难，只需进行一点尝试和错误即可。