Inner shadow in Core Graphics

Question

I want to do something similar to Photoshops inner shadow effect in Core Graphics. If I draw/fill a path with this effect, I want get something similar to the following:

Answer 1

Here are the layers you need to create to make this image, from back to front:

The base color, in this case a white background.

The shadow.

The shape casting the shadow. This is made by finding the bounding box of the inner shape, expanding that box by more than the width of the shadow, then cutting a hole in the box with the inner shape.

Clipping these with the inner shape.

Then finally drawing the surrounding colored shape, in this case a rectangle with the inner shape cut out.

Note: Depending upon the expected look, the shape casting the shadow may or may not be the same shape filling the foreground color. A thin section between the inner shape and the outer shape would cast a reduced shadow. If that effect is not desired, a larger outer shape would be required to get the consistent inner shadow. Also, the explicit clipping of the shadow is required in case the shadow extends beyond the outer shape.

To draw a shape with a hole in the middle, like this example shape, you'll want to draw a path with two subpaths. One subpath would be the outer box, and the other would be the inner irregular shape. If you're using the default nonzero winding number rule, you'll want to specify the points for the outer box in the opposite direction than the inner irregular shape. For example, specifying the outer box's points in clockwise order would require specifying the inner shape's points in counter-clockwise order. Refer to the Quartz 2D Programmer's Guide's section on Paths for more details.