How to draw a circle starting at the top

Question

I'm working with some example code that draws an arc using CGPaths. I've had a look around and have found documentation but I just can't seem to visualize in my head whats going on in terms of using MoveToPoint, AddLineToPoint etc. I can't 'see' what the code is doing I can just see the result.

For example the code below draws an arc a full 360 degrees beginning from the 3 o clock position. For the life of me I can't figure out how to make it begin from the 12 o clock position with actually rotating the view - 90 degrees.

Could somebody help me figure out this code and how I would change it to achieve the beginning from 12 o'clock, preferably trying to explain how this whole paths things works. Or maybe point me to a visual resource online?

- (void)drawPathWithArc:(CGFloat)arc {
    CGMutablePathRef thePath = CGPathCreateMutable();
    CGPathMoveToPoint(thePath, NULL, 100.f, 100.f);
    CGPathAddLineToPoint(thePath, NULL, 200.f, 100.f);
    CGPathAddArc(thePath, NULL, 100.f, 100.f, 100.f, 0.f, (360* M_PI)/180, NO);
    CGPathCloseSubpath(thePath);
    shapeLayer_.path = thePath;
    CGPathRelease(thePath);
}

Answer 1

Paths really are not that hard to understand visually. Basically all a path is is a line connecting two points on the cartesian plane that defines the iphone's screen.

When you moveToPoint it sets the current point of the path to the specified point.

When you addLineToPoint it draws a straight line from the current point to the specified point.

When you addCurveToPoint it draws a curved line from the current point to the specified point based on certain tangents and control points.

And so on. I would recommend reading apples documentation on CGPaths in order to better understand what each function is doing.

http://developer.apple.com/library/mac/#documentation/graphicsimaging/Reference/CGPath/Reference/reference.html

---

As far as your question goes to making this start at 12 instead of 3 simply read the documentation for the CGPathAddArc function.

What you need to do is change your current code:

CGPathAddArc(thePath, NULL, 100.f, 100.f, 100.f, 0.f, (360* M_PI)/180, NO);

to:

CGPathAddArc(thePath, NULL, 100.f, 100.f, 100.f, -M_PI_2, M_PI_2*3, NO);

All this is doing is changing the starting angle to -90 degrees (all angles are measured in radians from the horizontal) and the ending angle to 270 degrees.

---

Hope this helps. Cheers,

Brenton.