WRONG LINE LENGHT shapeLayer.strokeEnd = 0.5 draws more than half of the circle

Question

I want the line to end at the top with shapeLayer.strokeEnd = 1.0 and get a circle. the line must end here but she goes on, it just can't be seen

full circle

when i specify a value of 0.5 i want to get half of the circle but i get much more

half circle

My code:

View

    public func createCircleLine(progress: CGFloat, color: UIColor, width: CGFloat) {
    let radius = (min(bounds.width, bounds.height) - circleLineWidth) / 2
    let center = min(bounds.width, bounds.height) / 2

    let bezierPath = UIBezierPath(arcCenter: CGPoint(x: center, y: center),
                                  radius: radius,
                                  startAngle: -CGFloat.pi / 2,
                                  endAngle: 2 * CGFloat.pi,
                                  clockwise: true)

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = bezierPath.cgPath
    shapeLayer.fillColor = nil
    shapeLayer.strokeColor = circleProgressLineColor.cgColor
    shapeLayer.lineWidth = circleLineWidth
    shapeLayer.lineCap = .round
    shapeLayer.strokeEnd = progress
    layer.addSublayer(shapeLayer)
}

ViewController

class ViewController: UIViewController {

@IBOutlet weak var progressView: CircleProgressView!
override func viewDidLoad() {
    super.viewDidLoad()

}
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(false)
    progressView.createCircleLine(progress: 1.0, color: .green, width: 10)
} }

I don’t understand why I can’t get the correct line length, the coordinates are correct

can i get the correct line length without CABasicAnimation ()?

score 0 · Answer 1 · answered Dec 21 '21 at 02:08

You need to change the endAngle of your circle to 3 * CGFloat.pi / 2, so it is a complete cycle with no overlapping. The current circle you have has π/2 (90 degrees) overlap

let bezierPath = UIBezierPath(arcCenter: CGPoint(x: center, y: center),
                                      radius: radius,
                                      startAngle: -CGFloat.pi / 2,
                                      endAngle: 3 * CGFloat.pi / 2,
                                      clockwise: true)

WRONG LINE LENGHT shapeLayer.strokeEnd = 0.5 draws more than half of the circle

1 Answers1