Question

I am creating an iOS user interface to allow a user to pick a rectangle within an existing image, dragging the corners of that rectangle to the desired size. I now have four custom UIButtons (30% alpha) and a custom view (also with 30% alpha) that draws the dashed lines between the four corner buttons.

To “improve” the interface, I would like my drawRect code to make the cropped portion of the image appear “normal” while everything outside the cropped region is washed out (filled with white color, which will give me the correct effect since the UIView is set to 30% alpha).

The obvious algorithm would be:

1. Fill the entire image with [UIColor whiteColor] fill
2. Draw the four dashed lines with a [UIColor clearColor] fill

When I do this, the clear fill isn’t showing up. I believe this is because the “fill” of the clear color in step #2 isn’t being seen because the pixels were already set to white in step #1. Perhaps there’s a blend mode that will allow me to see the transparency of the second rectangle? I’m not sure about the various blend modes.

My second attempt, which works, does the following:

1. Draw the four dashed lines with [UIColor clearColor] fill
2. Draw four additional rectangles with [UIColor whiteColor] fill, each representing the portions to the left, right, above, and below the cropped region.

As I mention, this method works, but seems to me there should be a simpler way instead of me having to calculate these four additional rectangles each and every time.

There is a similar question on SO Create layer mask with custom-shaped hole that uses CALayer and masks, but this seems to be overkill for what I need.

Does anybody have any suggestions on how to improve this?

Answer 1

You can set the blend mode to kCGBlendModeCopy and use clearColor to reset a pixel’s alpha to zero. You can presumably also use kCGBlendModeClear but I haven’t tested that.

You can also set the clipping path to just contain the pixels you want cleared and call CGContextClearRect(gc, CGRectInfinite).

If you want to use a clipping mask with a hole in it, you can do so without using a CALayer, and you can build it a little more simply than in the answer you linked, by using the even-odd rule and CGRectInfinite:

CGContextSaveGState(GC); {
    CGContextBeginPath(gc);
    CGContextAddRect(gc, myRect); // or whatever simple path you want here
    CGContextAddRect(gc, CGRectInfinite);
    CGContextEOClip(gc);

    // drawing code here is clipped to the exterior of myRect

} CGContextRestoreGState(gc);