使用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

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

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

尝试使浅蓝色（左上角）和浅紫色（右下角）不那么鲜艳。我无法访问您的Sketch文件，因此我无法建议新颜色以获得完全匹配，但它不应该太难，只需要一点点反复试验。