Applying alpha outside intersection of 2 CGPath objects

Question

I have a CGPathRef for an oddly shaped polygon. I need to apply an alpha to the area outside of this path. This is pretty straightforward.

CGContextAddPath(context, crazyPolygon);
CGContextSetFillColor(context, someAlphaColor);
CGContextEOFillPath(context);

I need to do something similar with a circle, also straightforward.

CGMutablePathRef circlePath = CGPathCreateMutable();
CGPathAddRect(circlePath, NULL, rect);
CGPathAddEllipseInRect(circlePath, NULL, circleBox);
CGContextAddPath(context, circlePath);
CGContextSetFillColor(context, someAlphaColor);
CGContextEOFillPath(context);

The problem arises when I try to intersect the two shapes. I want to apply alpha to any pixel that isn't inside both shapes.

• If the point is in the circle but not within the polygon, apply the alpha.
• If it is in the polygon but not in the circle, apply the alpha.
• If it is in both the polygon and the circle, the pixel should be fully transparent.

I've tried a bunch of different approaches. None have worked. The most promising was to create a mask with the polygon and using CGContextClipToMask to bound the drawing of the circle. The full circle was drawn with no clipping though.

Answer 1

After a couple hours of more trial and error, I finally figured it out.

// Set up
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat outOfAreaColor[4] = { 0.0, 0.0, 0.0, OUT_OF_AREA_ALPHA };
CGContextSetFillColor(context, outOfAreaColor);

// Path for specifying outside of polygons
CGMutablePathRef outline = CGPathCreateMutable();
CGPathAddRect(outline, NULL, rect);
CGPathAddPath(outline, NULL, path);

// Fill the area outside of the path with an alpha mask
CGContextAddPath(context, outline);
CGPathRelease(outline);
CGContextEOFillPath(context);

// Add the inside path to the context and clip the context to that area
CGContextAddPath(context, insidePolygon);
CGContextClip(context);

// Create a path defining the area to draw outside of the circle
// but within the polygon
CGRect circleBox = CGRectMake(0, 0, circleRadius * 2.0, circleRadius * 2.0);
CGMutablePathRef darkLayer = CGPathCreateMutable();
CGPathAddRect(darkLayer, NULL, rect);
CGPathAddEllipseInRect(darkLayer, NULL, circleBox);
CGContextAddPath(context, darkLayer);
CGContextEOFillPath(context);
CGPathRelease(darkLayer);

When using CGPathAddEllipseInRect, the center of the circle/ellipse is circleBox.origin.x + circleBox.size.width / 2.0, circleBox.origin.y + circleBox.size.height / 2.0, not 0.0, 0.0. The documentation makes this very clear, but it's annoying to have to figure out when positioning your shapes.