Question

I’m trying to bevel paths in core graphics. Has anyone done this already for arbitrary shapes and if so are they willing to share code?

I’ve included my implementation below. I use three variables to determine the bevel: CGFloat bevelSize, UIColor highlightColor, UIColor shadow. Note that the angle of the light source is always 135 degrees. I haven’t finished implementing this yet, but here’s essentially what I’m trying to do, split into two parts. Part one, generate focal points:

1. I find the bisectors for the angles between each adjacent lines in the path.
2. For arcs, the bisector is the line perpendicular to the line created by the two end points of the arc, originating from the mid-point. This should take care of the majority of situations in which an arc is used. I do not take the bisector of an arc and a line. The arc bisector should work fine in those cases.
3. I then calculate focal points based on the intersection of each adjacent bisectors.
4. If a focal point is within the shape it’s used, otherwise it’s discarded.

The purpose of generating the focal points is to ‘shrink’ the shape proportionally.

The second part is a little more complicated. I essential create each side/segment of the bevelled shape. I do this by drawing ‘in’ (by the bevelSize) each point of the original shape along radius of the line that extends from the nearest focal point to the point in question. When I have two consecutive ‘bevelPoints’, I create a UIBezierPath that extends along from the bevelPoints to the original points and back to the bevelPoints (note, this includes arcs). This creates a ‘side/segment’ I can use to fill. On straight sides, I simply fill with either the shadow or highlight color, depending on the angle of the side. For arcs, I determine the radian ‘arc’. If that arc contains a transition angle (M_PI_4 or M_PI + M_PI_4) I fill it with a gradient (from shadow to highlight or highlight to shadow, which ever is appropriate). Otherwise I fill it with a solid color.

Update

I’ve split out my answer (see below) into a separate blog post. I’m not longer using the implementation details you see above but I’m keeping it all there for reference. I hope this helps anybody else looking to use Core Graphics.

Answer 1

So I did finally manage to write a routine to bevel arbitrary shapes in core graphics. It ended up being a lot of work, a lot more than I originally anticipated, but it’s been a fun project. I’ve posted an explanation and the code to perform the bevel on my blog. Just note that I didn’t create a full class (or set of classes) for this. This code was integrated into a much larger class I use to do all my core graphics drawing. However, all the code you need to bevel most arbitrary shapes is there.

UPDATE

I’ve rewritten the code as straight c and moved it into a separate file. It no longer depends on any other instance variables so that the beveling function can be called from within any context.

I explain the code and process I used to bevel here: Beveling Shapes In Core Graphics

Here is the code: Github : CGPathBevel.

The code isn’t perfect: I’m open to suggestions/corrections/better ways of doing things.