繪製漸變色在弧圓邊

我想斯威夫特複製這個..延伸閱讀：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的子類，修改了框架並使用了漸變代碼（第一個片段）。

對於弧線，我使用了第二個片段。我在想我可以繪製一條弧線，然後在弧線的末端繪製一個圓來平滑弧度，使其圓潤。我怎樣才能做到這一點，並在弧形上繪製漸變？

請忽略紫色標記。第一張照片是我的規範中漸變弧的開始，第二張是漸變弧的結束，位於開始弧的左下方。

如何使用Core Graphics在Swift中繪製？

來源

2016-05-07 quantumpotato

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 

}

希望這有助於！

來源

2017-03-27 10:50:59 Alfred

繪製漸變色在弧圓邊

回答

相關問題