ios - 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);