快速如何使渐变层从不同位置开始

Question

我正在编码区域图，无法上传实际图像，所以我画了一个图。

所以我正在使用两层，一层用于绘制区域，另一层用于绘制渐变。

这是代码：

 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)

我遇到的问题是渐变实际上从边界的顶部开始，如下所示：

但是我只希望它从最高的数据点开始。但是，如果我更改渐变层的框架以将其向下移动，则渐变实际上会像这样向下移动：

对此有任何帮助吗？

Answer 1

您不希望渐变框架的大小与形状图层的大小相同；您希望与路径的边框大小相同。幸运的是，cgPath为此提供了一种boundingBox方法。