iOS: Creating a rectangle with holes using Core Graphics - ios

Question

I have an MKMapView where I want to grey out parts of the map. More specifically, I want to have some circles and rectangles which are displayed normally and the rest of the map has a semi-transparent grey layer. Something like this:
For that, I think that I should subclass MKOverlay and MKOverlayRenderer. As Apple suggests, in my MKOverlayRenderer subclass, I should override the drawMapRect:zoomScale:inContext: method, and draw my stuff using Core Graphics. My question is how can I draw the following with Core Graphics?
I have spent some hours looking at masking and clipping using Core Graphics, but I haven't found anything similar to this. The QuartzDemo has some examples of clipping and masking. I guess clipping with either the even-odd or nonzero winding number rules won't work for me, as the rectangles and circles are dynamic. I think I have to create a mask somehow, but I can't figure out how. The QuartzDemo creates a mask out of an image. How could I create a mask using rectangles and circles? Is there any other way I could approach this?
Thank you

Answer 1

You should be able to setup a context with transparency, draw the skinny rectangles and circles without stroking them, draw a rectangle border around the whole context, and then fill the shape with the darker color. You'll need to look into fill order rules to make sure that the larger space is what is filled rather than the smaller joined shapes.
I guess clipping with either the even-odd or nonzero winding number rules won't work for me, as the rectangles and circles are dynamic.
This shouldn't matter.

Answer 2

Well, I worked it out myself. I have to create my own mask. This is done by drawing the "hole" shapes, outputting this to an ImageRef, and inverting this ImageRef to output the mask. Here is a code snippet that could work if you add it in the QuartzDemo project->QuartzClipping.m->QuartzClippingView class, at the end of the drawInContext method.
-(void)drawInContext:(CGContextRef)context {
// ...
CGContextSaveGState(context);
// dimension of the square mask
int dimension = 20;
// create mask
UIGraphicsBeginImageContextWithOptions(CGSizeMake(dimension, dimension), NO, 0.0f);
CGContextRef newContext = UIGraphicsGetCurrentContext();
// draw overlapping circle holes
CGContextFillEllipseInRect(newContext, CGRectMake(0, 0, 10, 10));
CGContextFillEllipseInRect(newContext, CGRectMake(0, 7, 10, 10));
// draw mask
CGImageRef mask = CGBitmapContextCreateImage(UIGraphicsGetCurrentContext());
UIGraphicsEndImageContext();
// the inverted mask is what we need
CGImageRef invertedMask = [self invertMask:mask dimension:dimension];
CGRect rectToDraw = CGRectMake(210.0, height - 290.0, 90.0, 90.0);
// everything drawn in rectToDraw after this will have two holes
CGContextClipToMask(context, rectToDraw, invertedMask);
// drawing a red rectangle for this demo
CGContextFillRect(context, rectToDraw);
CGContextRestoreGState(context);
}
// taken from the QuartzMaskingView below
- (CGImageRef)invertMask:(CGImageRef)originalMask dimension:(int)dimension{
// To show the difference with an image mask, we take the above image and process it to extract
// the alpha channel as a mask.
// Allocate data
NSMutableData *data = [NSMutableData dataWithLength:dimension * dimension * 1];
// Create a bitmap context
CGContextRef context = CGBitmapContextCreate([data mutableBytes], dimension, dimension, 8, dimension, NULL, (CGBitmapInfo)kCGImageAlphaOnly);
// Set the blend mode to copy to avoid any alteration of the source data
CGContextSetBlendMode(context, kCGBlendModeCopy);
// Draw the image to extract the alpha channel
CGContextDrawImage(context, CGRectMake(0.0, 0.0, dimension, dimension), originalMask);
// Now the alpha channel has been copied into our NSData object above, so discard the context and lets make an image mask.
CGContextRelease(context);
// Create a data provider for our data object (NSMutableData is tollfree bridged to CFMutableDataRef, which is compatible with CFDataRef)
CGDataProviderRef dataProvider = CGDataProviderCreateWithCFData((__bridge CFMutableDataRef)data);
// Create our new mask image with the same size as the original image
return CGImageMaskCreate(dimension, dimension, 8, 8, dimension, dataProvider, NULL, YES);
}
Any easier/more efficient solution is welcome :)