如何在swift中繪製弧線3

Question

我有一些從Web服務中獲取的百分比值。根據百分比值，我想通過以下方式在UIView中畫出一些弧線。

白色圓圈是UIView，我用這種方式試圖實現這一目標。

func colorProgress() 
{ 
    let circleColorPath=UIBezierPath(arcCenter: CGPoint.init(x: RDcircleEnum.circleCenterX.getValues(), y: RDcircleEnum.circleCenterY.getValues()), radius: self.innerCircleRadius, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*self.progressAmount), clockwise: true) 



    let shapeLayer = CAShapeLayer() 
    shapeLayer.path = circleColorPath.cgPath 

    //change the fill color 
    shapeLayer.fillColor = UIColor.blue.cgColor 
    //you can change the stroke color 
    shapeLayer.strokeColor = UIColor.red.cgColor 
    //you can change the line width 
    shapeLayer.lineWidth = 3.0 
    self.progressColor.setFill() 
    circleColorPath.fill() 
} 

但是這並沒有給我想要的。我想根據百分比值繪製不同長度的弧線。請幫幫我。

Answer 1

爲此，你應該推一些邏輯。

您應該考慮100 % equals to 360° (degree)作爲角度。

現在，例如，如果你有50 % progress那麼你end angle應該是180°

Answer 2

這是一個完美的邏輯在這裏爲你想要達到的目標：

https://codereview.stackexchange.com/questions/97615/draw-an-arc-based-on-a-given-percentage

自定義UIView類

import UIKit 

class DemoView: UIView { 

var startPoint: CGFloat = 0 
var color: UIColor = UIColor.yellow 
var trackColor: UIColor = UIColor.gray 
var trackWidth: CGFloat = 1 
var fillPercentage: CGFloat = 100 

override init(frame: CGRect) { 

    super.init(frame: frame) 
    self.backgroundColor = UIColor.clear 

} // init 

required init(coder aDecoder: NSCoder) { 

    super.init(coder: aDecoder)! 
    self.backgroundColor = UIColor.clear 

} // init 

private func getGraphStartAndEndPointsInRadians() -> (graphStartingPoint: CGFloat, graphEndingPoint: CGFloat) { 

    // make sure our starting point is at least 0 and less than 100 
    if (0 > self.startPoint) { 
     self.startPoint = 0 
    } else if (100 < self.startPoint) { 
     self.startPoint = 100 
    } // if 

    // make sure our fill percentage is at least 0 and less than 100 
    if (0 > self.fillPercentage) { 
     self.fillPercentage = 0 
    } else if (100 < self.fillPercentage) { 
     self.fillPercentage = 100 
    } // if 

    // we take 25% off the starting point, so that a zero starting point 
    // begins at the top of the circle instead of the right side... 
    self.startPoint = self.startPoint - 25 

    // we calculate a true fill percentage as we need to account 
    // for the potential difference in starting points 
    let trueFillPercentage = self.fillPercentage + self.startPoint 

    let π: CGFloat = .pi 

    // now we can calculate our start and end points in radians 
    let startPoint: CGFloat = ((2 * π)/100) * (CGFloat(self.startPoint)) 
    let endPoint: CGFloat = ((2 * π)/100) * (CGFloat(trueFillPercentage)) 

    return(startPoint, endPoint) 

} // func 

override func draw(_ rect: CGRect) { 

    // first we want to find the centerpoint and the radius of our rect 

    let center: CGPoint = CGPoint(x: rect.midX, y: rect.midY) 
    let radius: CGFloat = rect.width/2 

    // make sure our track width is at least 1 
    if (1 > self.trackWidth) { 
     self.trackWidth = 1 
    } // if 

    // and our track width cannot be greater than the radius of our circle 
    if (radius < self.trackWidth) { 
     self.trackWidth = radius 
    } // if 

    // we need our graph starting and ending points 
    let (graphStartingPoint, graphEndingPoint) = self.getGraphStartAndEndPointsInRadians() 

    // now we need to first draw the track... 
    let trackPath = UIBezierPath(arcCenter: center, radius: radius - (trackWidth/2), startAngle: graphStartingPoint, endAngle: 2.0 * .pi, clockwise: true) 
    trackPath.lineWidth = trackWidth 
    self.trackColor.setStroke() 
    trackPath.stroke() 

    // now we can draw the progress arc 
    let percentagePath = UIBezierPath(arcCenter: center, radius: radius - (trackWidth/2), startAngle: graphStartingPoint, endAngle: graphEndingPoint, clockwise: true) 
    percentagePath.lineWidth = trackWidth 
    percentagePath.lineCapStyle = .round 
    self.color.setStroke() 
    percentagePath.stroke() 

    return 

} // func } // class 

實施的viewController：

let demoView : DemoView = DemoView() 
demoView.frame = CGRect(x: 50, y: 100, width: 200, height: 200) 
demoView.trackWidth = 5 
demoView.startPoint = 0 
demoView.fillPercentage = 25 
self.view.addSubview(demoView)