Search code examples
iphonequartz-2d

How do I join two different colored lines using Quartz?

So according to Apple's Quartz 2D Programming guide, there are a number of predefined line join styles when connected line segments in your path meet at a corner (Miter Join, Round Join, Bevel Join). I'm looking to do this with different colored lines, which I'm having trouble with.

According to the discussion here: iPhone CGContext: drawing two lines with two different colors, in order to change the line color at some point along a path, you have to split that path into two parts. It seems like you have to stroke a path using color1, switch colors, then begin a new path using color2. However, because I'm splitting the path into two, it means that the Join Style won't apply anymore, since it only seems to apply to line segments that join as part of the same path.

Any ideas?

Solution

  • It is not possible to join two differently colored paths using Quartz because segments can only be joined if they are parts of the same path, while stroke color can only be applied to a whole path, not to individual segments. From Apple's Quartz 2D documentation:

    A path defines one or more shapes, or subpaths. [...] Path creation and path painting are separate tasks. First you create a path. When you want to render a path, you request Quartz to paint it.

    I can think of two workarounds:

    • Your best bet for decent results is to use kCGLineCapRound line caps and kCGLineJoinRound line joins for both paths and to make sure that the touching end points are in the same location.

    • If you need non-round joins and if the stroke color is opaque, then you could try drawing two overlapping paths so that the background path contains the line join and is partially obscured by the foreground path. This might work with kCGLineCapSquare or kCGLineCapButt caps and kCGLineJoinMiter joins, but you'd need to be careful with sharp angles and miter limits.

    If you want to go all out, you could treat each path as an outline and develop your own join design. In that case, you might find CGPathCreateCopyByStrokingPath useful – it creates a new path 'so that filling the new path draws the same pixels as stroking the original path'.