Swift：沿着貝塞爾路徑漸變（使用CALayers）

Question

我有一個相對直接的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上一堆額外的步驟。任何幫助將是偉大的，謝謝！

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) 

漸變圖層（代碼的第一部分）只是一個「服務建議」。如果這不是你想要的梯度，你可以設計你自己的。您可以在Photoshop中繪製它並使用圖像作爲漸變圖層的內容。或者，您可以使用第三方代碼（如https://github.com/paiv/AngleGradientLayer）在代碼中創建「角度」圖層。這個例子的要點僅僅是展示如何能夠「擦除」黑色層中的弧線，以便揭示隱藏在其後面的漸變，並因此看起來以漸變的方式繪製。