iOS draw filled Circles

Question

Not a graphics programmer here, so I'm trying to stumble through this. I'm trying to draw 9 filled circles, each a different color, each with a white border. The UIView's frame is CGRectMake (0,0,60,60). See attached image.

The problem is I'm getting "flat spots" on the borders on each side. Following is my code (from the UIView subclass):

- (void)drawRect:(CGRect)rect
{
    CGRect borderRect = CGRectMake(0.0, 0.0, 60.0, 60.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextSetRGBFillColor(context, colorRed, colorGreen, colorBlue, 1.0);
    CGContextSetLineWidth(context, 2.0);
    CGContextFillEllipseInRect (context, borderRect);
    CGContextStrokeEllipseInRect(context, borderRect);
    CGContextFillPath(context);
}

If I change to CGRectMake(0,0,56,56) in drawRect, I get flat spots only on the top and left sides, and the bottom & right sides look fine.

Can anyone suggest how I might fix this? It seems to me the border is being clipped by the UIView, but not knowing much about this, I really don't know how to fix it.

Thanks, in advance, for any of you graphics experts' suggestions.

Answer 1

I like the answer from @AaronGolden, just wanted to add:

CGRect borderRect = CGRectInset(rect, 2, 2);

Or, better:

CGFloat lineWidth = 2;
CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);

Answer 2

Those circles are just getting clipped to the bounds of the views that draw them. The views must be slightly larger than the circles to be drawn. You can imagine the CGContextStrokeEllipseInRect call tracing a circle of radius 30 and then painting one pixel on each side of the traced curve. Well on the far edges you're going to have one of those pixels just outside the boundary of the view.

Try making your views something like 62x62, or make the circle radius slightly smaller to leave room for the thick stroke in your 60x60 views.