如何使用渐变颜色填充贝塞尔曲线路径

Question

我有UIBezierPath自定义UIView draw(_ rect: CGRect)功能.我想用渐变色填充路径.请任何人都可以指导我如何做到这一点.

我需要用渐变颜色填充剪辑,然后用黑色描边路径.

SO中有一些帖子无法解决问题.例如Swift:沿着bezier路径的渐变(使用CALayers),这篇文章指导如何绘制图层UIView而不是图层UIBezierPath.

注意:我正在研究Swift-3

Answer 1

要回答你的这个问题,

我的自定义UIView绘图(_ rect:CGRect)函数中有一个UIBezierPath.我想用渐变色填充路径.

让我们说你有一个椭圆形的路径,

let path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 100, height: 100))

要创建渐变,

let gradient = CAGradientLayer()
gradient.frame = path.bounds
gradient.colors = [UIColor.magenta.cgColor, UIColor.cyan.cgColor]

我们需要一个渐变的遮罩层,

let shapeMask = CAShapeLayer()
shapeMask.path = path.cgPath

现在设置这个shapeLayer作为mask的gradient层将它添加到view的层subLayer

gradient.mask = shapeMask
yourCustomView.layer.addSublayer(gradient)

更新 使用笔划创建基础图层并在创建渐变图层之前添加.

let shape = CAShapeLayer()
shape.path = path.cgPath
shape.lineWidth = 2.0
shape.strokeColor = UIColor.black.cgColor
self.view.layer.addSublayer(shape)

let gradient = CAGradientLayer()
gradient.frame = path.bounds
gradient.colors = [UIColor.magenta.cgColor, UIColor.cyan.cgColor]

let shapeMask = CAShapeLayer()
shapeMask.path = path.cgPath
gradient.mask = shapeMask

self.view.layer.addSublayer(gradient)

Answer 2

您可以直接在Core Graphics中执行此操作,而无需使用CALayer类.用于bezierPath.addClip()将贝塞尔曲线路径设置为剪切区域.任何后续绘图命令都将被屏蔽到该区域.

我在我的一个项目中使用这个包装函数:

func drawLinearGradient(inside path:UIBezierPath, start:CGPoint, end:CGPoint, colors:[UIColor])
{
    guard let ctx = UIGraphicsGetCurrentContext() else { return }

    ctx.saveGState()
    defer { ctx.restoreGState() } // clean up graphics state changes when the method returns

    path.addClip() // use the path as the clipping region

    let cgColors = colors.map({ $0.cgColor })
    guard let gradient = CGGradient(colorsSpace: nil, colors: cgColors as CFArray, locations: nil)
        else { return }

    ctx.drawLinearGradient(gradient, start: start, end: end, options: [])
}