UIBezierPath draw circle with different strokes

Eli_Rozen picture Eli_Rozen · Aug 23, 2013 · Viewed 15k times · Source

Basically I need to have a circle with stroke in different color, all equal in size. For example, 1/2 is blue and 1/2 is red. Image (sorry for so bad image):

Example

How can I draw something like this?

Answer

Rob picture Rob · Aug 23, 2013

There are lots of ways to do it, but one is to just draw two bezier paths, one for each side:

- (void)drawRect:(CGRect)rect
{
    UIBezierPath *blueHalf = [UIBezierPath bezierPath];
    [blueHalf addArcWithCenter:CGPointMake(100, 100) radius:90.0 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
    [blueHalf setLineWidth:4.0];
    [[UIColor blueColor] setStroke];
    [blueHalf stroke];

    UIBezierPath *redHalf = [UIBezierPath bezierPath];
    [redHalf addArcWithCenter:CGPointMake(100, 100) radius:90.0 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:YES];
    [redHalf setLineWidth:4.0];
    [[UIColor redColor] setStroke];
    [redHalf stroke];
}

Or, if you want to do this in Core Graphics:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 4);

    CGContextSetStrokeColorWithColor(context, [[UIColor blueColor] CGColor]);
    CGContextAddArc(context, 100, 100, 90, -M_PI_2, M_PI_2, FALSE);
    CGContextStrokePath(context);

    CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
    CGContextAddArc(context, 100, 100, 90, M_PI_2, -M_PI_2, FALSE);
    CGContextStrokePath(context);
}