Question

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

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

SO中有一些帖子无法解决问题。例如Swift: Gradient along a bezier path (using CALayers)这篇文章指导了如何在UIView中绘制图层，而不是UIBezierPath中的图层。

注意：我正在使用Swift-3

Answer 1

回答你的这个问题，

我的自定义UIView绘图中有一个UIBezierPath（_ rect：CGRect）功能。我想用渐变色填充路径。

假设你有一条椭圆形路径，

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()
    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: [])

    ctx.restoreGState() // remove the clipping region for future draw operations
}

如何使用渐变颜色

2 个答案: