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

Question

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

7

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

我已经附上一些截图以便明确区分。虽然这并不是很大的区别，但仍然需要注意。

- Gergely

看起来CAGradientLayer的端点与草图中的端点不匹配。我对CAGradientLayer并不很了解，无法告诉您是否可以将它们移动到图层的边界之外。 - yano

https://github.com/Gradients/Gradients - SPatel

https://github.com/rwbutler/AnimatedGradientView - SPatel

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roger Lee · Answer 1

我写了一个脚本，将Sketch渐变图层转换为CALayer。通过view.layer.insertSublayer(gradientLayer, at: 0)插入此图层。

链接：将Sketch渐变转换为Swift代码

选择包含一个渐变填充的图层，然后按下control + shift + K，粘贴下面的代码并运行。你会看到：

在 iPhone 上看起来像这样：

console.log('Select Layer Then Run Script.');

var sketch = require('sketch');
var UI = require('sketch/ui');

var document = sketch.getSelectedDocument();

var selectedLayers = document.selectedLayers;
var selectedCount = selectedLayers.length;

function hexToRGBA(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16),
    a: parseInt(result[4], 16)
  } : null;
}

let precesion = 10000

function parseGradient(layerGradient) {

  let colorItems = ""
  let locationArray = ""

  layerGradient.stops.forEach(elm => {
    let rgbaColor = hexToRGBA(elm.color)
    colorItems += `UIColor(red: ${rgbaColor.r}/255.0, green: ${rgbaColor.g}/255.0, blue: ${rgbaColor.b}/255.0, alpha: ${rgbaColor.a}/255.0), `
    locationArray += `${Math.round(elm.position*precesion)/precesion}, `
  });

  var codeTemplate = `
import Foundation
import UIKit

class LinearGradientLayer: CALayer {
    
  required override init() {
      super.init()
      needsDisplayOnBoundsChange = true
  }
  
  required init?(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)
  }
  
  required override init(layer: Any) {
      super.init(layer: layer)
  }
  
  let colors = [${colorItems}].map(\{ \$0.cgColor \})
  
  override func draw(in ctx: CGContext) {
      ctx.saveGState()
      let colorSpace = CGColorSpaceCreateDeviceRGB()
      let locations: [CGFloat] = [${locationArray}]
      let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations)!
      
      ctx.drawLinearGradient(gradient, start: CGPoint(x: ${Math.round(layerGradient.from.x*precesion)/precesion}*bounds.width, y: ${Math.round(layerGradient.from.y*precesion)/precesion}*bounds.height), end: CGPoint(x: ${Math.round(layerGradient.to.x*precesion)/precesion}*bounds.width, y: ${Math.round(layerGradient.to.y*precesion)/precesion}*bounds.height), options: [.drawsBeforeStartLocation, .drawsAfterEndLocation])
  }
}
`;

  return codeTemplate
}

if (selectedCount === 0) {
  UI.alert('No layers are selected', 'Select one gradient filled layer and rerun.')
} else {
  selectedLayers.forEach(function (layer, i) {
    console.log((i + 1) + '. ' + layer.name);
    let layerGradient = layer.style.fills[0].gradient;

    console.log(layerGradient)

    UI.getInputFromUser(
      "Convert Result",
      {
        initialValue: parseGradient(layerGradient),
        numberOfLines: 12
      },
      (err, value) => {
        if (err) {
          // most likely the user canceled the input
          return;
        }
      }
    );

  });
}

- nathangitter · Answer 2

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

如果您想要与Sketch文件完全匹配，您需要对颜色进行一些光学调整以解决这些差异。您的两幅图像非常接近，因此只需进行一些小的颜色调整，它就应该更接近。

尝试减少浅蓝色（左上）和淡紫色（右下）的饱和度。我无法访问您的Sketch文件，因此无法建议新的颜色以实现精确匹配，但这并不难，只需要一些尝试和错误就可以了。