如何在swift 3中绘制弧线

Question

我有一些来自网络服务的百分比值。根据百分比值我想在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)

Answer 3

对于仍在寻找答案的任何人，您需要更改 strokeEnd 属性以显示百分比。

shapeLayer.strokeEnd = percentage/100;