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.

score 14 · Accepted Answer · answered Oct 30 '15 at 08:10

14

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

answered Oct 30 '15 at 08:10

Leo

24,596
11
71
92

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? – casperson Jun 19 '18 at 23:05

score 0 · Answer 2 · answered Jan 13 '16 at 14:16

0

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.

answered Jan 13 '16 at 14:16

Eddie Deng

1,399
1
18
30

CAShapeLayer strokeStart and strokeEnd positions

2 Answers2

Linked