How to draw a rounded rectangle in Core Graphics / Quartz 2D?

Question

I need to draw an outline for a rounded rectangle. I know I can make lines and arcs, but maybe there is also a function for rounded rects?

Answer 1

Instead of making your own path out of lines and arcs, you can use

[UIBezierPath bezierPathWithRoundedRect:cornerRadius:] 

or

[UIBezierPath bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:] 

(the second one lets you specify which corners are rounded)

Available in iOS 3.2 or later.

Answer 2

There is no prepackaged way to this, you must combine arcs in order to do this, apples quartzdemo project shows the code to do this, here is a reference Quartz Demo and here is the code they provide

  // As a bonus, we'll combine arcs to create a round rectangle!    // Drawing with a white stroke color   CGContextRef context=UIGraphicsGetCurrentContext() CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);     // If you were making this as a routine, you would probably accept a rectangle  // that defines its bounds, and a radius reflecting the "rounded-ness" of the rectangle.  CGRect rrect = CGRectMake(210.0, 90.0, 60.0, 60.0);  CGFloat radius = 10.0;  // NOTE: At this point you may want to verify that your radius is no more than half  // the width and height of your rectangle, as this technique degenerates for those cases.    // In order to draw a rounded rectangle, we will take advantage of the fact that  // CGContextAddArcToPoint will draw straight lines past the start and end of the arc  // in order to create the path from the current position and the destination position.    // In order to create the 4 arcs correctly, we need to know the min, mid and max positions  // on the x and y lengths of the given rectangle.  CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);  CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);    // Next, we will go around the rectangle in the order given by the figure below.  //       minx    midx    maxx  // miny    2       3       4  // midy   1 9              5  // maxy    8       7       6  // Which gives us a coincident start and end point, which is incidental to this technique, but still doesn't  // form a closed path, so we still need to close the path to connect the ends correctly.  // Thus we start by moving to point 1, then adding arcs through each pair of points that follows.  // You could use a similar tecgnique to create any shape with rounded corners.    // Start at 1  CGContextMoveToPoint(context, minx, midy);  // Add an arc through 2 to 3  CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);  // Add an arc through 4 to 5  CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);  // Add an arc through 6 to 7  CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);  // Add an arc through 8 to 9  CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);  // Close the path  CGContextClosePath(context);  // Fill & stroke the path  CGContextDrawPath(context, kCGPathFillStroke);