在 UIBezierPath 图上应用渐变层

Posted 2023-02-23

【中文标题】在 UIBezierPath 图上应用渐变层

【英文标题】：Applying gradient layer over a UIBezierPath graph

【发布时间】：2018-06-12 14:41:18

【问题描述】：

这是我第一次提出问题，如果不是很彻底，请原谅我。

基本上，我试图在绘制为图形的 UIBezierPath 之上应用渐变层。

这是我的图表：

这是我要的渐变层：

这是我尝试绘制的图表：

let path = quadCurvedPathWithPoints(points: points)
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.blue.cgColor
shapeLayer.fillColor = UIColor.white.cgColor
shapeLayer.position = CGPoint(x: 0, y: 0)
shapeLayer.lineWidth = 1.0

显然，这会用蓝色笔触填充图形，但现在我正在尝试将白色应用到绿色渐变。我这样做的方式不起作用。结果如下：

这是我正在努力解决的代码：

let startColor = UIColor.white.withAlphaComponent(0.5)
let endColor = UIColor.green

let gradient = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
gradient.frame = path.bounds
let shapeMask = CAShapeLayer()
shapeMask.path = path.cgPath
gradient.mask = shapeLayer
sparkLineView.layer.addSublayer(gradient)

【参考方案1】：

这是一个使用渐变绘制UIBezierPath 路径的小演示。您可以将其复制到 Swift Playground 中。

class GradientGraph: UIView 
    override func draw(_ rect: CGRect) 
        // Create the "graph"
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: frame.height * 0.5))
        path.addLine(to: CGPoint(x: frame.width * 0.2, y: frame.height * 0.3))
        path.addLine(to: CGPoint(x: frame.width * 0.4, y: frame.height * 0.8))
        path.addLine(to: CGPoint(x: frame.width * 0.6, y: frame.height * 0.4))
        path.addLine(to: CGPoint(x: frame.width * 0.8, y: frame.height * 0.7))

        // Create the gradient
        let gradient = CGGradient(colorsSpace: nil, colors: [UIColor.white.cgColor,UIColor.green.cgColor] as CFArray, locations: nil)!

        // Draw the graph and apply the gradient
        let ctx = UIGraphicsGetCurrentContext()!
        ctx.setLineWidth(6)

        ctx.saveGState()
        ctx.addPath(path.cgPath)
        ctx.replacePathWithStrokedPath()
        ctx.clip()
        ctx.drawLinearGradient(gradient, start: CGPoint(x: 0, y: 0), end: CGPoint(x: frame.width, y: 0), options: [])
        ctx.restoreGState()
    


let graph = GradientGraph(frame: CGRect(x: 0, y: 0, width: 700, height: 700))

【讨论】：

哇！这正是我想要做的！说真的，非常感谢。

你是我的英雄！谢谢！