Swift: Gradient entlang eines Bezier-Pfades (mit CALayers)

Question

Ich habe eine relativ einfache Implementierung einer Fortschrittsanzeige, die mit CALayer-Objekten eingerichtet wurde. Die Fortschrittsanzeige selbst ist eine Unteransicht von UIView.

Hier ist der Code, der den Fortschritt Ring aufstellt:

 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) 

Was ich versuche jetzt zu tun ist, einen Gradienten zu dem progressRingLayer hinzufügen, die (oder Biegungen mit) den Pfad folgt. Es ist mir gelungen, der Füllung einen linearen Gradienten hinzuzufügen, aber nicht nur den Pfad. Hier

ist ein Beispiel dafür, was Wirkung Ich mag:

Bisher alles, was ich gefunden habe erfordert eine Reihe von zusätzlichen Schritten mit Core Graphics und CGContext, die nicht ganz fit mit meiner Implementierung. Jede Hilfe wäre großartig, danke!

Answer 1

Was ich tun würde, ist eine Farbverlaufsschicht zeichnen, dann auf eine Schicht zeichnen, die schwarz mit dem Bogen gelöscht ist.

Hier ist mein Versuch, in etwa das Bild, das Sie zur Verfügung gestellt (ich das White-Label in der Mitte weggelassen, aber das ist trivial):

Und hier ist der Code, der es erzeugt:

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) 

Die Farbverlaufsschicht (der erste Teil des Codes) ist nur ein "Serving-Vorschlag". Wenn das nicht der gewünschte Verlauf ist, können Sie Ihren eigenen entwerfen. Sie könnten es in Photoshop zeichnen und ein Bild als Inhalt der Farbverlaufsschicht verwenden. Oder Sie könnten eine "eckige" Ebene im Code erstellen, indem Sie Code von Drittanbietern wie https://github.com/paiv/AngleGradientLayer verwenden. Der Punkt des Beispiels besteht lediglich darin, zu zeigen, wie es möglich ist, einen Bogen in einer schwarzen Schicht zu "löschen", um den dahinter verborgenen Gradienten zu offenbaren, und so zu erscheinen, als würde er mit einem Gradienten malen.