So fügen Sie einen Farbverlauf zu einem mit UIBezierPath erstellten CAShapeLayer hinzu

Question

Ich habe versucht this und this, aber immer noch keinen Erfolg. Grundsätzlich möchte ich so etwas schaffen (innerer Kreis). Der Kreis wird anhand einiger Daten erstellt, sagen wir, wenn Daten 50 sind, erhalten wir einen Halbkreis und wenn er 100 ist, werden wir den vollen Kreis bekommen.

Und das ist, was ich bisher habe, so wie kann ich schaffen das obige Design

ich eine Ansicht mit Interface Builder erstellt haben, und diese Kreis mit diesem gezogen Code

override func viewDidLoad() { 


    let circlePath = UIBezierPath(arcCenter: CGPoint(x: myView.layer.frame.height/2,y: myView.layer.frame.height/2), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true) 

    let shapeLayer = CAShapeLayer() 
    shapeLayer.path = circlePath.CGPath 
    shapeLayer.fillColor = UIColor.clearColor().CGColor 
    shapeLayer.strokeColor = UIColor.grayColor().CGColor 
    shapeLayer.lineWidth = 3.0 

    let colorCirclePath = UIBezierPath(arcCenter: CGPoint(x: myView.layer.frame.height/2,y: myView.layer.frame.height/2), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true) 

    let coloredShapeLayer = CAShapeLayer() 
    coloredShapeLayer.path = colorCirclePath.CGPath 
    coloredShapeLayer.fillColor = UIColor.clearColor().CGColor 
    coloredShapeLayer.strokeColor = UIColor.whiteColor().CGColor 
    coloredShapeLayer.lineWidth = 10.0 
    self.myView.layer.addSublayer(coloredShapeLayer) 

    self.myView.layer.addSublayer(shapeLayer) 



} 

So erstelle ich den Farbverlauf.

let gradient: CAGradientLayer = CAGradientLayer() 
    let startingColorOfGradient = UIColor(colorLiteralRed: 50/255, green: 189/255, blue: 170/255, alpha: 1.0).CGColor 
    let endingColorOFGradient = UIColor(colorLiteralRed: 133/255, green: 210/255, blue: 230/255, alpha: 1.0).CGColor 
    gradient.startPoint = CGPoint(x: 1.0, y: 0.5) 
    gradient.endPoint = CGPoint(x: 0.0, y: 0.5) 
    gradient.colors = [startingColorOfGradient , endingColorOFGradient] 
    self.myView.layer.insertSublayer(gradient, atIndex:0) 

Answer 1

Wenn Sie möchten, eine echte Simulation der Farbverlauf Sie das überprüfen this SO answer .Es basiert auf einem Kreuz, das in 4 Portionen Ihre rechteckigen Ansicht geteilt, dann verschieben die Farben auf jedem Abschnitt eine regelmäßige Steigung auf die angelegte zu erhalten Ebenenmaske.