ios - 使用CAGradientLayer再现草图渐变的正确方法

我想创建一个具有四种给定颜色的渐变层。我有一个渐变的草图文件。我有色标的坐标。我计算了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)
    }
}

我附上了一些屏幕截图，以使区别更加明显。差别不大，但仍然如此。

最佳答案

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

如果要与“草图”文件完全匹配，则需要对颜色进行一些光学调整以解决差异。您的两个图像非常接近，因此在进行一些较小的颜色调整后，它看起来应该更接近。

尝试使浅蓝色(左上方)和浅紫色(右下方)不那么活跃。我没有访问您的Sketch文件的权限，因此我不能建议使用新的颜色来获得完全匹配的颜色，但是它应该不会太难，只是需要一点点尝试和错误。

关于ios - 使用CAGradientLayer再现草图渐变的正确方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46652845/