iOS Core Graphics: Draw ONLY shadows of a CGPath

Question

I am drawing a simple path in iOS 5 with Core Graphics:

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(   path, NULL, center.x   , topMargin   );
CGPathAddLineToPoint(path, NULL, center.x+20, topMargin+50);
CGPathAddLineToPoint(path, NULL, center.x   , topMargin+40);
CGPathAddLineToPoint(path, NULL, center.x-20, topMargin+50);
CGPathAddLineToPoint(path, NULL, center.x   , topMargin   );

Now i want to fill it in Overlay mode like so:

[[UIColor colorWithRed:0 green:0 blue:0 alpha:0.4] setFill];
CGContextAddPath(context, path);
CGContextSetBlendMode (context, kCGBlendModeOverlay);
CGContextFillPath(context);

Which gives me exactly the expected result. But next, i want to create an embossed effect. I thought of using a white and a black drop shadow in order to achieve this effect like so:

[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] setFill];
CGContextAddPath(context, path);
CGContextSetShadowWithColor(context, CGSizeMake(1, 1), 1.0, highlightColor);
CGContextSetBlendMode (context, kCGBlendModeNormal);
CGContextFillPath(context);

[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] setFill];
CGContextAddPath(context, path);
CGContextSetShadowWithColor(context, CGSizeMake(-1, -1), 1.0, shadowColor);
CGContextSetBlendMode (context, kCGBlendModeNormal);
CGContextFillPath(context);

The problem is, the shadows are not drawn when alpha is set to 0.
Now the question: Is there a way to draw only the shadows without the fill color but in full alpha? Can I somehow prevent the inside of my path from being drawn? Or is there perhaps a simpler way of drawing two shadows for one path?

Karoy Lorentey Karoy Lorentey · Accepted Answer · 2011-11-17T17:31:14

I suggest you set the context's clipping path to the inverse of the shape's path, configure the shadow, and fill the shape normally, with full opacity. The clipping path will mask out the fill color, and only the shadow would remain.

CGContextSaveGState(context);
CGRect boundingRect = CGContextGetClipBoundingBox(context);
CGContextAddRect(context, boundingRect);
CGContextAddPath(context, path);
CGContextEOClip(context);

[[UIColor blackColor] setFill];
CGContextAddPath(context, path);
CGContextSetShadowWithColor(context, CGSizeMake(1, 1), 1.0, highlightColor);
CGContextSetBlendMode (context, kCGBlendModeNormal);
CGContextFillPath(context);

CGContextAddPath(context, path);
CGContextSetShadowWithColor(context, CGSizeMake(-1, -1), 1.0, shadowColor);
CGContextSetBlendMode (context, kCGBlendModeNormal);
CGContextFillPath(context);

CGContextRestoreGState(context);

The trick is using CGContextEOClip and an additional rectangle subpath to set the clipping area to whatever is not covered by the original path. This will work for any path that is not self-intersecting.

iOS Core Graphics: Draw ONLY shadows of a CGPath

1 Answers