How can I clear the corners outside of a rounded r

问题:

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

回答1:

Add the rounded-rect path to the clipping path before drawing the image.

回答2:

Last week I was trying to do something similar.

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

https://github.com/GabrielMassana/TransparentRoudRectButton