dPompa Blog
«
»

Drawing a round rect with Quartz

Update: Fixed a bug when drawing at origin different from 0,0.

If you’re doing Quartz drawing code, you probably need or will need to draw a rect with round corners. Doing it for so many times, I just came up with this simple routine which will hopefully make your life easier:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

void DPContextAddRoundRect(CGContextRef context, CGRect rect, CGFloat cornerRad) {
	// Top Left
	CGContextMoveToPoint(context, rect.origin.x, cornerRad);
	CGContextAddArcToPoint(context,
                               rect.origin.x,
                               rect.origin.y,
                               rect.origin.x + cornerRad,
                               rect.origin.y,
                               cornerRad);
	// Top right
	CGContextAddArcToPoint(context,
                               rect.origin.x + rect.size.width,
                               rect.origin.y,
                               rect.origin.x + rect.size.width,
                               rect.origin.x + cornerRad,
                               cornerRad);
	// Bottom right
	CGContextAddArcToPoint(context,
                               rect.origin.x + rect.size.width,
                               rect.origin.y + rect.size.height,
                               rect.origin.x + rect.size.width - cornerRad,
                               rect.origin.y + rect.size.height,
                               cornerRad);
	// Bottom left
	CGContextAddArcToPoint(context,
                               rect.origin.x,
                               rect.origin.y + rect.size.height,
                               rect.origin.x,
                               rect.origin.y,
                               cornerRad);
	CGContextClosePath(context);
}

This simple function takes a rect in which to draw the path, and a radius for the corners. Play with it and see how it works.

This entry was posted on Monday, August 17th, 2009 at 9:59 AM by Ofri Wolfus and is filed under Code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Drawing a round rect with Quartz”

  1. boogleTron says:
    December 9, 2009 at 1:41 AM

    Thanks for the hint! I’m a quartz drawing noob and the thing that I had to figure out on my own was that I needed to bracket the call to your function like so:

    CGContextBeginPath(context);

    DPContextAddRoundRect(context, rect, radius);

    CGContextDrawPath(context, kCGPathStroke);

  2. boogleTron says:
    December 9, 2009 at 2:26 AM

    It seems like you forgot to update the posted code after fixing the bug you mentioned. Here’s my correction:
    void DPContextAddRoundRect(CGContextRef context, CGRect rect, CGFloat cornerRad) {
    // Top Left
    CGContextMoveToPoint(context, rect.origin.x, cornerRad+rect.origin.y);
    CGContextAddArcToPoint(context,
    rect.origin.x,
    rect.origin.y,
    rect.origin.x + cornerRad,
    rect.origin.y,
    cornerRad);
    // Top right
    CGContextAddArcToPoint(context,
    rect.origin.x + rect.size.width,
    rect.origin.y,
    rect.origin.x + rect.size.width,
    rect.origin.y + cornerRad,
    cornerRad);

Leave a Reply