Drawing rounded rect in core graphics

Question

I want to replicate the event markers of the default iPad calendar, which look like this:

I'm trying to use coregraphics for this, painting a path of a rounded rect. This is the result I could come up with:

As you can see, iPad's version looks much smoother on the rounded corners. I tried to use a bigger line width, which looks like this:

My code looks like this (got it from this website):

UIColor* fillColor= [self.color colorByMultiplyingByRed:1 green:1 blue:1 alpha:0.2];

CGContextSetLineWidth(ctx, 1.0);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextSetFillColorWithColor(ctx, fillColor.CGColor);

CGRect rrect = self.bounds;

CGFloat radius = 30.0;
CGFloat width = CGRectGetWidth(rrect);
CGFloat height = CGRectGetHeight(rrect);

if (radius > width/2.0)
   radius = width/2.0;

if (radius > height/2.0)
   radius = height/2.0;    

CGFloat minx = CGRectGetMinX(rrect);
CGFloat midx = CGRectGetMidX(rrect);
CGFloat maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect);
CGFloat midy = CGRectGetMidY(rrect);
CGFloat maxy = CGRectGetMaxY(rrect);
CGContextMoveToPoint(ctx, minx, midy);
CGContextAddArcToPoint(ctx, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(ctx, maxx, miny, maxx, midy, radius);

CGContextAddArcToPoint(ctx, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(ctx, minx, maxy, minx, midy, radius);
CGContextClosePath(ctx);
CGContextDrawPath(ctx, kCGPathFillStroke);

// draw circle on left side

CGRect target= CGRectMake(rect.origin.x + 4.0, 
                          rect.origin.y + 3.0, 
                          7.0, 7.0);

CGContextSetFillColorWithColor(ctx, self.color.CGColor);
CGContextSetAlpha(ctx, 0.4);
CGContextFillEllipseInRect(ctx, target);

CGContextSetAlpha(ctx, 0.9);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextStrokeEllipseInRect(ctx, target);

Can anyone help me to bring the results closer to the original? Should I use a different technique to paint the rounded rect, or are there any parameters I can change to make it look smoother? I already tried using a UIBezierPath, but it basically looked the same. Any tips?

[edit] The CGRectInset-based solution looks like this:

Answer 1

Your problem is that the stroke is applied on the center of the path and half of it gets cropped/masked to the bounds of your view since it draws outside of your view. If you inset your drawing one point in every direction you will have the result you are looking for. If you increase the width of the stroke you will need to inset the drawing further (by half the width of the stroke (i.e a 4 points wide stroke should be inset 2 points).

This can easily be fixed by changing

CGRect rrect = self.bounds;

into

// Inset x and y by half the stroke width (1 point for 2 point stroke) 
CGRect rrect = CGRectInset(self.bounds, 1, 1);

Answer 2

It's because a stroke is centered on the path, which means half of it is inside your rectangle and the other half is outside.

To solve this, double your stroke width and clip to the path before stroking. The result is an inner stroke, which will be entirely within the rectangle.

Note that clipping to the current path in Quartz will reset the current path, so you should create the path as a CGPath so that you can add it, clip to it, add it again, and stroke it.