start and end angle of UIBezierPath?

Question

I have coded as below for half circle in iOS using UIBezierPath and CAShapeLayer.

 clockWiseLayer = [[CAShapeLayer alloc] init];

CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI + M_PI_2;

CGFloat width = CGRectGetWidth(imageView.frame)/2.0f + 30;
CGFloat height = CGRectGetHeight(imageView.frame)/2.0f +50;
CGPoint centerPoint = CGPointMake(width, height);

float radius = CGRectGetWidth(imageView.frame)/2+10;

clockWiseLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                    radius:radius
                                                startAngle:startAngle
                                                  endAngle:endAngle
                                                 clockwise:YES].CGPath;

clockWiseLayer.fillColor = [UIColor clearColor].CGColor;
clockWiseLayer.strokeColor = [UIColor blueColor].CGColor;
clockWiseLayer.borderColor = [UIColor greenColor].CGColor;
clockWiseLayer.backgroundColor = [UIColor redColor].CGColor;

clockWiseLayer.strokeStart = 0.0f;
clockWiseLayer.strokeEnd = 0.5f;

clockWiseLayer.lineWidth = 2.0f;
clockWiseLayer.borderWidth = 5.0f;

clockWiseLayer.shouldRasterize = NO;
[self.layer addSublayer:clockWiseLayer];

This results as below.

I want this blue half circle on the opposite side of the World Globe.

It is half Circle, but I want it on the other side, also CounterClockWise.

I am unable to set start and end angle for that, while clockwise:NO.

Thanks.

What do you mean by "I am **unable** to set start and end angle for that, while clockwise:NO" It does not draw a half circle? It crashes? something else? — Avt, Aug 23 '15 at 09:48
It is not crashing, but it not showing result as I am expecting. If I say NO to clockwise it will be astonished (hide from view) in same start and end angle @Avt — Sam Shaikh, Aug 23 '15 at 09:52

Grzegorz Krukowski · Accepted Answer · 2018-06-20T14:15:02.100

Check documentation for coordinates: http://i.stack.imgur.com/1yJo6.png

Y-Axis is reversed compared to standard coordinate system in mathematics.

You should draw from 1/2*PI (bottom anchor) to 3/2*PI (top anchor) and then you set strokeStart to 0.0f and strokeEnd to 1.0f (so it fills whole path).

Working code using iOS constants:

CGFloat startAngle = M_PI_2;
CGFloat endAngle = startAngle + M_PI;
CGFloat width = CGRectGetWidth(imageView.frame)/2.0f;
CGFloat height = CGRectGetHeight(imageView.frame)/2.0f;
CGPoint centerPoint = CGPointMake(width, height);
float radius = CGRectGetWidth(imageView.frame)/2+10;
CAShapeLayer* clockWiseLayer = [[CAShapeLayer alloc] init];
clockWiseLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                     radius:radius
                                                 startAngle:startAngle
                                                   endAngle:endAngle
                                                  clockwise:YES].CGPath;

clockWiseLayer.fillColor = [UIColor clearColor].CGColor;
clockWiseLayer.strokeColor = [UIColor blueColor].CGColor;
clockWiseLayer.borderColor = [UIColor greenColor].CGColor;
clockWiseLayer.backgroundColor = [UIColor redColor].CGColor;

clockWiseLayer.strokeStart = 0.0f;
clockWiseLayer.strokeEnd = 1.0f;

clockWiseLayer.lineWidth = 2.0f;
clockWiseLayer.borderWidth = 5.0f;
[self.layer addSublayer:clockWiseLayer];

If I want to move a circle from Top to top anticlockwise , what should be the start and end Angle. Please help — Kunal Gupta, Dec 24 '16 at 15:53
@DilipTiwari all you need to do is to use different startAngle and endAngle - rest stays the same. endAngle will be startAngle + 2*M_PI, startAngle is as explained above M_PI+M_PI_2. — Grzegorz Krukowski, Sep 29 '20 at 15:09

score 7 · Answer 2 · answered Aug 23 '15 at 09:56

You start from top of the circle with -M_PI_2 and end at M_PI + M_PI_2 (if you want to have full circle and limit it using strokeEnd, strokeStart). Then set the circle path to draw from half of the end of the path (left side of image) instead from beginning to half (right side of the image)

CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI + M_PI_2;

clockWiseLayer.strokeStart = .5f;
clockWiseLayer.strokeEnd = 1.0f;

score 1 · Answer 3 · answered Aug 23 '15 at 10:18

I have played with bezierPathWithArcCenter and it works quite strange if clockwise = NO. But if you want to create an circle bezier path with conterclockwise direction you can create a clockwise path and then revert it with bezierPathByReversingPath

A new path object with the same path shape but for which the path has been created in the reverse direction.

start and end angle of UIBezierPath?

3 Answers3

Linked