Swift：沿着贝塞尔路径渐变（使用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添加一个渐变，该渐变跟随（或弯曲）该路径。 我已经成功地为填充添加了线性渐变，但不是仅添加到路径中。

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

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

---

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

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

以下是生成它的代码：

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)

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

链接地址: http://www.djcxy.com/p/71077.html

上一篇: Swift: Gradient along a bezier path (using CALayers)

下一篇: Calculate colours for points along an arbitrary gradient