I am attempting to implement a custom view. This view should display an image surrounded by a gray, rounded rect border. I can get the image to display fine, as well as the border, however, since the border has rounded corners, I need a way to clear those corners such that they correctly display whatever is behind the view. How can I accomplish this?
It seems like I might be able to use CGContextClearRect, but then wouldn’t I have to call this multiple times, reconstructing the area outside of my rounded corner? That sounds overly 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); }
Add the rounded-rect path to the clipping path before drawing the image.