6

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 ?
    //

}

4 Answers 4

15
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();
2
  • Hey sch, thank you for the answer, you should change in the answer above " CGContextDrawPath(context,kCGPathFill);" on both cases, but other then that it works fine.
    – chewy
    Mar 13, 2012 at 12:54
  • Yes, I forgot that. You may also use kCGPathFillStroke if you want to both fill and stroke.
    – sch
    Mar 13, 2012 at 12:58
5

/* Similar to the previous solution but somewhat simpler. radius and start-end angle variables defined for clarity only. */

#define PI 3.14285714285714
float radius1 = 80;
float radius2 = 30;
float startAngle = 0;
float endAngle = endAngle = PI*2;
CGPoint position = CGPointMake(100,100);

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
UIColor *theFillColor = UIColorFromRGB(0x6c83a6);
CGContextSetFillColorWithColor(context, theFillColor.CGColor);

CGContextBeginPath(context);
CGContextAddArc(ctx, position.x, position.y, radius1, startAngle, endAngle, 1);
CGContextDrawPath(context, kCGPathFillStroke); // Or kCGPathFill

// You may change the fill and stroke here before drawing the circle
CGContextBeginPath(context);
CGContextAddArc(ctx, position.x, position.y, radius2, startAngle, endAngle, 1);
CGContextDrawPath(context, kCGPathFillStroke); // Or kCGPathFill

UIGraphicsEndImageContext();
1
  • 1
    you can you the M_PI define
    – graver
    May 29, 2014 at 14:44
1

Swift

func drawRect(rect: CGRect) {
let context: CGContextRef = UIGraphicsGetCurrentContext()!
CGContextSetLineWidth(context, 4.0)
CGContextSetStrokeColorWithColor(context, UIColor(hue: 0, saturation: 0, brightness: 94, alpha: 242).CGColor)

let theFillColor: UIColor = UIColor(hue: 0, saturation: 100, brightness: 80, alpha: 204)
CGContextSetFillColorWithColor(context, theFillColor.CGColor)

let rectangle: CGRect = CGRectMake(5.0, 5.0, rect.size.width-10.0, rect.size.height-10.0)
CGContextBeginPath(context)
CGContextAddEllipseInRect(context, rectangle)
CGContextDrawPath(context, CGPathDrawingMode.FillStroke)

let smallRect: CGRect = CGRectInset(rectangle, 40, 40)

CGContextBeginPath(context)
CGContextAddEllipseInRect(context, smallRect)
CGContextDrawPath(context, CGPathDrawingMode.FillStroke)
UIGraphicsEndImageContext()
}
0

Swift 4.0

    let context: CGContext = UIGraphicsGetCurrentContext()!
    context.setLineWidth(4.0)
    context.setStrokeColor(UIColor(hue: 0, saturation: 0, brightness: 94, alpha: 242).cgColor)

    let theFillColor: UIColor = UIColor(hue: 0, saturation: 100, brightness: 80, alpha: 204)
    context.setFillColor(theFillColor.cgColor)

    let rectangle: CGRect = CGRect(x: 5.0, y: 5.0, width: rect.size.width-10.0, height: rect.size.height-10.0)
    context.beginPath()
    context.addEllipse(in: rectangle)
    context.drawPath(using:CGPathDrawingMode.fillStroke)

    let smallRect: CGRect = rectangle.insetBy(dx: 40, dy: 40)

    context.beginPath()
    context.addEllipse(in: smallRect)
    context.drawPath(using: CGPathDrawingMode.fillStroke)
    UIGraphicsEndImageContext()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.