Swift：沿着贝塞尔path渐变（使用CALayers）

我有一个相对直观的实现与CALayer对象设置的进度视图。 进度视图本身是UIView的子视图。

以下是设置进度环的代码：

self.progressRingLayer = CAShapeLayer() let innerRect = CGRectInset(bounds, CGFloat(self.lineWidth) / 2, CGFloat(self.lineWidth) / 2) let innerPath = UIBezierPath(ovalInRect: innerRect) self.progressRingLayer.path = innerPath.CGPath self.progressRingLayer.fillColor = UIColor.clearColor().CGColor self.progressRingLayer.strokeColor = kProgressColor.CGColor self.progressRingLayer.anchorPoint = CGPointMake(0.5, 0.5) self.progressRingLayer.transform = CATransform3DRotate(self.progressRingLayer.transform, (CGFloat(M_PI))*1, 0, 0, 1) self.progressRingLayer.lineCap = kCALineCapRound self.progressRingLayer.lineWidth = CGFloat(self.lineWidth) self.layer.addSublayer(self.progressRingLayer) 

我现在要做的就是向progressRingLayer添加一个渐变（跟随（或弯曲））path。 我已经成功地为填充添加线性渐变，但不是仅添加到path。

这里是我想要什么效果的一个例子：

到目前为止，我发现的所有东西都需要一些CoreGraphics和CGContext的附加步骤，这些步骤不太适合我的实现。 任何帮助将是伟大的，谢谢！

Answer 1

我要做的是绘制一个渐变图层，然后绘制一个黑色的图层顶部，并删除圆弧。

以下是我大致提供的形象（我忽略了中间的白色标签，但这很简单）：

这里是生成它的代码：

 let r = CGRectMake(100,100,130,100) let g = CAGradientLayer() g.frame = r let c1 = UIColor( red: 151.0/255.0, green: 81.0/255.0, blue: 227.0/255.0, alpha: 1) let c2 = UIColor( red: 36.0/255.0, green: 176.0/255.0, blue: 233.0/255.0, alpha: 1) g.colors = [c1.CGColor as AnyObject, c2.CGColor as AnyObject]; self.view.layer.addSublayer(g) let percent = CGFloat(0.64) // percentage of circle UIGraphicsBeginImageContextWithOptions(r.size, false, 0) let con = UIGraphicsGetCurrentContext() CGContextFillRect(con, CGRect(origin: CGPoint(), size: r.size)) CGContextSetLineWidth(con, 5) CGContextSetLineCap(con, kCGLineCapRound) CGContextSetBlendMode(con, kCGBlendModeClear) let pi = CGFloat(M_PI) CGContextAddArc(con, r.size.width/2.0, r.size.height/2.0, 30, -pi/2.0, -pi/2.0 + percent*pi*2.0, 0) CGContextStrokePath(con) let im = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() let b = CALayer() b.frame = r b.contents = im.CGImage self.view.layer.addSublayer(b) 

渐变图层（代码的第一部分）只是一个“服务build议”。 如果这不是你想要的梯度，你可以devise自己的。 您可以在Photoshop中绘制它，并使用图像作为渐变图层的内容。 或者，您可以使用第三方代码（如https://github.com/paiv/AngleGradientLayer）在代码中创build“angular度”图层。 这个例子的要点仅仅是显示如何能够“擦除”黑色层中的弧线，以便揭示隐藏在其后面的梯度，并且因此看起来以渐变的方式绘制。