Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS Core Graphics: Draw ONLY shadows of a CGPath

Tags:

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?

like image 897
Patrick Oscity Avatar asked Nov 17 '11 16:11

Patrick Oscity


1 Answers

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.

like image 119
Karoy Lorentey Avatar answered Sep 23 '22 19:09

Karoy Lorentey