swift 如何让渐变层从不同的位置开始
swift how to make gradient layer start at different position
我正在编写区域图,无法上传实际图像,所以我画了一个插图。
所以我用了两层,一层画区域,另一层画渐变。
这是相关代码:
let area = CGMutablePath()
let zero = CGFloat(scaleValueOnYAxis(min!.y))
area.move(to: CGPoint(x: CGFloat(xValues[0]), y: zero))
for i in 0..<xValues.count {
area.addLine(to: CGPoint(x: CGFloat(xValues[i]), y: CGFloat(yValues[i])))
}
area.addLine(to: CGPoint(x: CGFloat(xValues.last!), y: zero))
let areaLayer = CAShapeLayer()
areaLayer.frame = self.bounds
areaLayer.path = area
areaLayer.strokeColor = nil
areaLayer.lineWidth = 0
layers.append(areaLayer)
self.layer.addSublayer(areaLayer)
//draw the gradient layer
let gradient = CAGradientLayer()
let startColor = SomeColor.cgColor
let endColor = SomeOtherColor.cgColor
let gradientAngle = 0
let angle = CGPoint.convert(angle: gradientAngle)
gradient.frame = self.bounds
gradient.colors = [startColor.cgColor, endColor.cgColor]
if let _gradientAngle = angle {
let (startPoint, endPoint) = CGPoint.getStartAndEndPoint(angle: _gradientAngle)
gradient.startPoint = startPoint
gradient.endPoint = endPoint
}
gradient.mask = areaLayer
layers.append(gradient)
self.layer.addSublayer(gradient)
我遇到的问题是渐变实际上是从边界的顶部开始的,如下所示:
但我希望它只从最高数据点开始。但是如果我改变渐变层的框架使其向下移动,渐变实际上是这样向下移动的:
请问有什么帮助吗??
您不希望渐变框与形状图层大小相同;您希望与路径的边界框大小相同。幸运的是,cgPath 有一个 boundingBox 方法。
我正在编写区域图,无法上传实际图像,所以我画了一个插图。
所以我用了两层,一层画区域,另一层画渐变。
这是相关代码:
let area = CGMutablePath()
let zero = CGFloat(scaleValueOnYAxis(min!.y))
area.move(to: CGPoint(x: CGFloat(xValues[0]), y: zero))
for i in 0..<xValues.count {
area.addLine(to: CGPoint(x: CGFloat(xValues[i]), y: CGFloat(yValues[i])))
}
area.addLine(to: CGPoint(x: CGFloat(xValues.last!), y: zero))
let areaLayer = CAShapeLayer()
areaLayer.frame = self.bounds
areaLayer.path = area
areaLayer.strokeColor = nil
areaLayer.lineWidth = 0
layers.append(areaLayer)
self.layer.addSublayer(areaLayer)
//draw the gradient layer
let gradient = CAGradientLayer()
let startColor = SomeColor.cgColor
let endColor = SomeOtherColor.cgColor
let gradientAngle = 0
let angle = CGPoint.convert(angle: gradientAngle)
gradient.frame = self.bounds
gradient.colors = [startColor.cgColor, endColor.cgColor]
if let _gradientAngle = angle {
let (startPoint, endPoint) = CGPoint.getStartAndEndPoint(angle: _gradientAngle)
gradient.startPoint = startPoint
gradient.endPoint = endPoint
}
gradient.mask = areaLayer
layers.append(gradient)
self.layer.addSublayer(gradient)
我遇到的问题是渐变实际上是从边界的顶部开始的,如下所示:
但我希望它只从最高数据点开始。但是如果我改变渐变层的框架使其向下移动,渐变实际上是这样向下移动的:
请问有什么帮助吗??
您不希望渐变框与形状图层大小相同;您希望与路径的边界框大小相同。幸运的是,cgPath 有一个 boundingBox 方法。