如何用渐变颜色填充bezier路径

Question

我在自定义的UIBezierPath函数中有一个UIView draw(_ rect: CGRect)。我想用渐变颜色填充路径。请任何人指点我该怎么做。

我需要填充一个渐变颜色的剪辑，然后用黑色笔画路径。

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

注:我正在研制Swift-3。

Answer 1

为了回答你的问题，

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

假设你有一条椭圆形的道路，

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 of 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

无需使用CALayer类，就可以在Core中直接这样做。使用bezierPath.addClip()将bezier路径设置为裁剪区域。任何后续的绘图命令都将被屏蔽到该区域。

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

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

Answer 3

这里的其他答案似乎行不通(至少在较新的iOS版本中是这样吗？)

下面是一个正在创建的bezier路径和作为渐变笔画的笔画的工作示例，根据需要调整CGPoints和CGColors：

        CGPoint start = CGPointMake(300, 400);
        CGPoint end = CGPointMake(350, 400);
        CGPoint control = CGPointMake(300, 365);
        
        UIBezierPath *path = [UIBezierPath new];
        [path moveToPoint:start];
        [path addQuadCurveToPoint:end controlPoint:control];
        
        CAShapeLayer *shapeLayer = [CAShapeLayer new];
        shapeLayer.path = path.CGPath;
        shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        shapeLayer.lineWidth = 2.0;
        //[self.view.layer addSublayer:shapeLayer];
        
        CGRect gradientBounds = CGRectMake(path.bounds.origin.x-shapeLayer.lineWidth, path.bounds.origin.y-shapeLayer.lineWidth, path.bounds.size.width+shapeLayer.lineWidth*2.0, path.bounds.size.height+shapeLayer.lineWidth*2.0);
        CAGradientLayer *gradientLayer = [CAGradientLayer new];
        gradientLayer.frame = gradientBounds;
        gradientLayer.bounds = gradientBounds;
        gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
        gradientLayer.mask = shapeLayer;
        [self.view.layer addSublayer:gradientLayer];