首页 > 解决方案 > swift如何使渐变层从不同的位置开始

问题描述

我正在编写面积图,无法上传实际图像,所以我画了一个插图。 在此处输入图像描述

所以我使用了两层,一层绘制区域,另一层绘制渐变。

这是代码:

 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)

我遇到的问题是渐变实际上从边界的顶部开始,如下所示: 在此处输入图像描述

但我希望它只从高数据点开始。但是,如果我更改渐变层的框架以将其向下移动,渐变实际上会像这样向下移动: 在此处输入图像描述

请问这方面有什么帮助吗??

标签: swiftcashapelayercagradientlayer

解决方案


您不希望渐变框架与形状图层的大小相同;您希望与路径的边界框大小相同。幸运的是,cgPath 有一个boundingBox方法。


推荐阅读