Search code examples
quartz-graphicsquartz-2dcgcontext

Quartz Arcs, Fill, Stroke and paths

)

I've got to create a few custom buttons that will be on the side of a circle (like this example on the right hand side image : http://dribbble.com/shots/352571-Game-UI-Bottom-Left)

I tried to create the basic shape using this code :

CGContextSetLineWidth(context, 2.0);
CGContextAddArc(context, 200, 200, 100, -M_PI_4, M_PI + M_PI_4, 1);
CGContextAddArc(context, 200, 200, 60, M_PI + M_PI_4,-M_PI_4 , 0);
CGContextClosePath(context);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextFillPath(context);
CGContextAddArc(context, 200, 200, 100, -M_PI_4, M_PI + M_PI_4, 1);
CGContextAddArc(context, 200, 200, 60, M_PI + M_PI_4,-M_PI_4 , 0);
CGContextClosePath(context);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextStrokePath(context);

I've never done some Core Graphics yet (only small stuff like drawing a circle and stuff...). It seems surprising tha in order to stroke the shape and pain it, I have to recreate the path. I guess there are some much clever ways to do this right? ;) Since I'm here, I will have to draw some gradients in this shape, just in case it complicates the whole stuff ;) Thanks for you help

Solution

  • Check out the following functions to create a single path:

    CGPathCreateMutable()
CGPathAddRect()/CGPathAddRects()
CGContextAddPath()

    ...and for performance, remember to cache this path if you're going to draw it multiple times!