CAShapeLayer strokeStart and strokeEnd positions

Question

I have this piece of code:

    let arcPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, frame.width, frame.height))

    circleLayer = CAShapeLayer()
    circleLayer.path = arcPath.CGPath
    circleLayer.fillColor = UIColor.clearColor().CGColor
    circleLayer.strokeColor = UIColor.blueColor().CGColor
    circleLayer.lineWidth = 5.0;

    circleLayer.strokeStart = 0
    circleLayer.strokeEnd = 0.7

which results like this:

As you can see, the arc starts on the right side of the circle. I would like to draw the arc starting from the top. How would I do that? Do I have to rotate the whole thing by -90 degrees to accomplish what I'm trying to do?

Thanks.

Macswan

Answer 1

You can create the path like this

let bezierPath = UIBezierPath(arcCenter:CGPointMake(100,100), radius:40, startAngle: CGFloat(M_PI_2) * 3.0, endAngle:CGFloat(M_PI_2) * 3.0 + CGFloat(M_PI) * 2.0, clockwise: true)

SceenShot

Feltonfelts

So for this, how could I start at an arbitrary location where the user tapped? Let's say they tapped at what would be Apple's 100 degrees on the circle, and I wanted to draw clockwise all the way around to Apple's 45 degrees? – Alluring

Swift 5.0 UIBezierPath( arcCenter: CGPointMake(100,100), radius: 40, startAngle: -CGFloat(Double.pi / 2), endAngle: CGFloat(Double.pi / 2) * 3.0, clockwise: true ) – Annetteannex

Answer 2

I think subtracting 90 * M_PI / 180 from your original startAngle and endAngle is enough for this task.

God knows why Apple decides to treat 90 degree as the top.

Argumentative