Рисование цвета градиента в дуге с закругленным краем

Question

Я хочу повторить это в Swift .. читать дальше: How to draw a linear gradient arc with Qt QPainter?

Я понял, как рисовать градиент внутри прямоугольного зрения:

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) 
    } 

и как рисовать дугу

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) 
    } 

с градиентом, который занимал весь вид. Я не знал, как ограничить градиент определенной областью, поэтому я создал подкласс UIView, изменил фрейм и использовал градиентный код (первый фрагмент).

Для дуг я использовал второй фрагмент. Я думаю, что могу нарисовать дугу, а затем нарисую круг в конце дуги, чтобы сгладить дугу округлым концом. Как я могу это сделать и нарисовать градиент по форме дуги?

Пожалуйста, игнорируйте фиолетовый знак. Первое изображение - начало дуги градиента из моей спецификации, второе - конец дуги градиента, ниже и слева от начала дуги.

Как это сделать в Swift с графикой ядра?

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 

} 

Надеется, что это помогает !!