How can I clear corners outside a rounded rectangle using the iPhone SDK?

Question

I am trying to implement a custom view. This view should display an image surrounded by a gray rectangular rectangular border. However, I can get the image to display it as well as the border, since the border has rounded corners. I need a way to clear these corners so that they correctly display everything that is beyond the point of view. How can i do this?

It looks like I could use a CGContextClearRect , but then I would not need to call it several times, reconstructing the area outside my rounded corner? That sounds too complicated.

Is there a better way to create this view?

Here is my current code:

 - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); // Draw the image. This will completely fill the current rect. [image drawInRect:self.bounds]; // Ensure we draw completely within our bounds instead of straddling it. CGRect rrect = self.bounds; rrect.size.height = rrect.size.height - 1.0; rrect.size.width = rrect.size.width - 1.0; rrect.origin.x = rrect.origin.x + (1.0 / 2); rrect.origin.y = rrect.origin.y + (1.0 / 2); CGFloat radius = 5.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); // Draw the rounded rect border. CGContextSetRGBStrokeColor(context, 0.6, 0.6, 0.6, 1.0); CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.0); CGContextSetLineWidth(context, 1.0); CGContextMoveToPoint(context, minx, midy); CGContextAddArcToPoint(context, minx, miny, midx, miny, radius); CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius); CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius); CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius); CGContextClosePath(context); CGContextDrawPath(context, kCGPathFillStroke); } 

Answer 1

Add a path back to the clipping path before drawing the image.

Answer 2

Last week I tried to do something similar.

With your question, answer, and other Q&A, I created an example with a solution.

https://github.com/GabrielMassana/TransparentRoudRectButton