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 方法。