Search code examples
iphoneiosobjective-cquartz-graphics

drawing two circles using Quartz CGContextFillEllipseInRect


I am trying to draw two circles one inside of the other as the image below.

enter image description here

I have managed to draw one circle (the external one) nicely, but I am not sure how to add the 2nd circle on-top, and how to center it.

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 4.0);
    CGContextSetStrokeColorWithColor(context, 
                                     [UIColor whiteColor].CGColor);
    //
     UIColor *theFillColor = UIColorFromRGB(0x6c83a6);
    CGContextSetFillColor(context, CGColorGetComponents(theFillColor.CGColor));

    CGRect rectangle = CGRectMake(5.0,5.0,rect.size.width-10.0,rect.size.height-10.0);


    CGContextAddEllipseInRect(context, rectangle);
    CGContextStrokePath(context);
    CGContextFillEllipseInRect(context, rectangle);
    UIGraphicsEndImageContext();
    //
    // INSIDE ?
    //

}

Solution

  • CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 4.0);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    UIColor *theFillColor = UIColorFromRGB(0x6c83a6);
    CGContextSetFillColorWithColor(context, theFillColor.CGColor);
    
    CGRect rectangle = CGRectMake(5.0,5.0,rect.size.width-10.0,rect.size.height-10.0);
    CGContextBeginPath(context);
    CGContextAddEllipseInRect(context, rectangle);
    CGContextDrawPath(context, kCGPathFillStroke); // Or kCGPathFill
    
    CGRect smallRect = CGRectInset(rectangle, 40, 40); // change 40 with the desired value
    // You may change the fill and stroke here before drawing the circle
    CGContextBeginPath(context);
    CGContextAddEllipseInRect(context, smallRect);
    CGContextDrawPath(context, kCGPathFillStroke); // Or kCGPathFill
    
    UIGraphicsEndImageContext();