将CGGradient转换为CAGradientLayer

Question

我使用PaintCode StyleKit生成一组渐变，但PaintCode将它们导出为CGGradient。我想把这些梯度加成layer。是否可以将CGGradient转换为CAGradientLayer？

Answer 1

否。CAGradientLayer的要点是，你可以向它描述你想要的梯度，它会为你绘制梯度。你已经走过了那一步；您已经描述了您想要的渐变(到PaintCode，而不是到CAGradientLayer的)，因此您已经拥有了您想要想要的渐变。因此，对于想要使用CAGradientLayer的人来说，这是很愚蠢的，因为如果你要这样做，为什么首先要使用PaintCode？只需将CGGradient本身绘制成图像、视图甚至图层即可。

Answer 2

不能从CGGradient中获取颜色，但可以使用相同的值来设置CAGradientLayer的colors和locations属性。也许修改生成的PCGradient类会对您有所帮助，使其周围的颜色和位置保持为可以传递到CAGradientLayer的NSArray。

Answer 3

如果您有一个渐变库，并且只是偶尔需要使用两种格式之一的渐变，这一点可能很重要。

是的，这是可能的，但需要一些数学运算才能从常规坐标系(x值从0到宽度，y值从0和高度)转换为CAGradientLayer使用的坐标系(x值从0至1，y值由0至1)。它需要更多的数学运算(相当复杂)才能得到正确的斜率。

x从0到1的距离将取决于原始矩形的宽度。y从0到1的距离将取决于原始矩形的高度。因此：

let convertedStartX = startX/Double(width)
let convertedStartY = startY/Double(height)
let convertedEndX = endX/Double(width)
let convertedEndY = endY/Double(height)
let intermediateStartPoint = CGPoint(x:convertedStartX,y:convertedStartY)
let intermediateEndPoint = CGPoint(x:convertedEndX,y:convertedEndY)

如果你原来的矩形是一个正方形，这就行了。否则，定义坡度角度的直线的坡度将是错误的！要解决此问题，请参阅此处的最佳答案：CAGradientLayer对角线梯度

如果你从那里拿起实用程序，那么你可以按照如下方式设置最终转换的起点和终点，从上面已经调整的点值开始：

let fixedStartEnd:(CGPoint,CGPoint) = LinearGradientFixer.fixPoints(start: intermediateStartPoint, end: intermediateEndPoint, bounds: CGSize(width:width,height:height))
let myGradientLayer = CAGradientLayer()
myGradientLayer.startPoint = fixedStartEnd.0
myGradientLayer.endPoint = fixedStartEnd.1

以下是完整Struct的代码，您可以使用它来存储梯度数据，并根据需要返回CGGradients或CAGradientLayers：

import UIKit
struct UniversalGradient {
//Doubles are more precise than CGFloats for the
//calculations needed to convert start and end
//to CAGradientLayers 1...0 format
var startX: Double
var startY: Double
var endX: Double
var endY: Double
let options: CGGradientDrawingOptions = [.drawsBeforeStartLocation, .drawsAfterEndLocation]
//for CAGradientLayer
var colors: [UIColor]
var locations: [Double]
//computed conversions
private var myCGColors: [CGColor] {
return self.colors .map {color in color.cgColor}
}
private var myCGFloatLocations: [CGFloat] {
return self.locations .map {location in CGFloat(location)}
}
//computed properties
var gradient: CGGradient {
return CGGradient(colorsSpace: nil, colors: myCGColors as CFArray, locations: myCGFloatLocations)!
}
var start: CGPoint {
return CGPoint(x: startX,y: startY)
}
var end: CGPoint {
return CGPoint(x: endX,y: endY)
}
//can't use computed property here
//since we need details of the specific environment's bounds to be passed in
//so this will be an instance function
func gradientLayer(width: CGFloat, height: CGFloat) -> CAGradientLayer {
//convert location x and y values from full coordinates to 0...1 for start and end
//this works great for position, but it gets the slope incorrect if the view is not square
//this is because the gradient is not drawn with the final scale
//it is drawn while the view is square, and then it gets stretched, changing the angle
//https://stackoverflow.com/questions/38821631/cagradientlayer-diagonal-gradient
let convertedStartX = startX/Double(width)
let convertedStartY = startY/Double(height)
let convertedEndX = endX/Double(width)
let convertedEndY = endY/Double(height)
let intermediateStartPoint = CGPoint(x:convertedStartX,y:convertedStartY)
let intermediateEndPoint = CGPoint(x:convertedEndX,y:convertedEndY)
let fixedStartEnd:(CGPoint,CGPoint) = LinearGradientFixer.fixPoints(start: intermediateStartPoint, end: intermediateEndPoint, bounds: CGSize(width:width,height:height))
let myGradientLayer = CAGradientLayer()
myGradientLayer.startPoint = fixedStartEnd.0
myGradientLayer.endPoint = fixedStartEnd.1
myGradientLayer.locations = self.locations .map {location in NSNumber(value: location)}
myGradientLayer.colors = self.colors .map {color in color.cgColor}
return myGradientLayer
}
}