Zeichnen eines Farbverlauf in einem Bogen mit einer abgerundeten Kante

Question

I dies in Swift replizieren wollen .. Lesen weiter: How to draw a linear gradient arc with Qt QPainter?

Ich habe herausgefunden, wie ein Gefälle ziehen innerhalb eines rechteckigen Ansicht:

override func drawRect(rect: CGRect) { 
     let currentContext = UIGraphicsGetCurrentContext() 
     CGContextSaveGState(currentContext) 
     let colorSpace = CGColorSpaceCreateDeviceRGB() 

     let startColor = MyDisplay.displayColor(myMetric.currentValue) 
     let startColorComponents = CGColorGetComponents(startColor.CGColor) 
     let endColor = MyDisplay.gradientEndDisplayColor(myMetric.currentValue) 
     let endColorComponents = CGColorGetComponents(endColor.CGColor) 

     var colorComponents 
      = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]] 

     var locations: [CGFloat] = [0.0, 1.0] 
     let gradient = CGGradientCreateWithColorComponents(colorSpace, &colorComponents, &locations, 2) 

     let startPoint = CGPointMake(0, 0) 
     let endPoint = CGPointMake(1, 8) 

     CGContextDrawLinearGradient(currentContext, gradient, startPoint, endPoint, CGGradientDrawingOptions.DrawsAfterEndLocation) 
     CGContextRestoreGState(currentContext) 
    } 

und wie ein arc

func drawArc(color: UIColor, x: CGFloat, y: CGFloat, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, lineWidth: CGFloat, clockwise: Int32) { 
     let context = UIGraphicsGetCurrentContext() 
     CGContextSetLineWidth(context, lineWidth) 
     CGContextSetStrokeColorWithColor(context, 
             color.CGColor) 
     CGContextAddArc(context, x, y, radius, startAngle, endAngle, clockwise) 
     CGContextStrokePath(context) 
    } 

mit dem Gradienten, die die gesamte Ansicht zeichnen aufnahm. Ich war mir nicht sicher, wie ich den Gradienten auf ein bestimmtes Gebiet beschränken sollte, also habe ich eine Unterklasse von UIView erstellt, den Rahmen modifiziert und den Gradientencode (erstes Snippet) benutzt.

Für Bögen habe ich den zweiten Ausschnitt verwendet. Ich denke, ich kann einen Bogen zeichnen und dann am Ende des Bogens einen Kreis zeichnen, um den Bogen mit einer abgerundeten Oberfläche zu glätten. Wie kann ich dies tun und einen Verlauf über die Bogenform zeichnen?

Bitte geben Sie die lila Zeichen ignorieren. Das erste Bild ist der Beginn des Gradientenbogens aus meiner Spezifikation, das zweite ist das Ende des Gradientenbogens, unterhalb und links vom Anfangsbogen.

Wie kann ich das in Swift mit Core Graphics zeichnen?

Answer 1

override func draw(_ rect: CGRect) { 

    //Add gradient layer 
    let gl = CAGradientLayer() 
    gl.frame = rect 
    gl.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] 
    layer.addSublayer(gl) 

    //create mask in the shape of arc 
    let sl = CAShapeLayer() 
    sl.frame = rect 
    sl.lineWidth = 15.0 
    sl.strokeColor = UIColor.red.cgColor 
    let path = UIBezierPath() 
    path.addArc(withCenter: .zero, radius: 250.0, startAngle: 10.0.radians, endAngle: 60.0.radians, clockwise: true) 
    sl.fillColor = UIColor.clear.cgColor 
    sl.lineCap = kCALineCapRound 
    sl.path = path.cgPath 

    //Add mask to gradient layer 
    gl.mask = sl 

} 

hoffe, das hilft !!