Core Graphics draw line with outline

Question

I'm drawing an arbitrary line with Core Graphics with a width of 4 pixels, now I would like this line to have a 1 pixel outline of another colour. I can't see any CG functions that would achieve this "out of the box" but I'm looking for suggestions on how it could be done. This is my existing code:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);

CGPoint curPoint = [(NSValue*)[points objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(context, curPoint.x, curPoint.y);

for( int i = 1; i < [points count]; i++ ) {
    curPoint = [(NSValue*)[points objectAtIndex:i] CGPointValue];
    CGContextAddLineToPoint(context, curPoint.x, curPoint.y);
    CGContextStrokePath(context);
    CGContextMoveToPoint(context, curPoint.x, curPoint.y);
}

This produces the single line. I would like to produce a 4px line with a 1px line highlighting the 4px line like this:

Answer 1

iOS 5.0 added a new feature CGPathCreateCopyByStrokingPath() that does what you want.

First create a CGPathRef for the black path, and then create a copy of it with CGPathCreateCopyByStrokingPath() .

This will give you a new path, which you can fill in black and stroke in red, to get what you want.

Also, creating paths is a bit slow. You should avoid creating paths while performing screen drawing. All your paths should be stored in RAM and ready to go before you start drawing to the screen. drawRect: should only draw the path, not create it.

Answer 2

Similar to what Abhi Beckert suggests, but you can use this function:

CGContextReplacePathWithStrokedPath(CGContextRef c);

Which is present in older SDKs too - iOS 4.1, MacOS X 10.6, for example.
Also it is better to create the whole path and then stroke it (or stroke and fill in the same time) at the end - in other words no need to have CGContextStrokePath inside the loop.

Answer 3

I am afraid you will have to draw the path again with the line width set to 1. If you want it to be on the outside of your 4 pixel path, you will have to adjust your path accordingly.

Edit: One other option comes to mind - you can stroke a pattern - see Apple's QuartzDemo for an example how.

Answer 4

There isn't a built-in way to convert a stroke to a path, and then stroke that path. That said, you may be able to approximate this by drawing the line twice: once with a 6 pixel stroke (4 pixels + 1 on each side) and then again with a 4 pixel stroke in a different color

Similar to:

CGContextRef context = UIGraphicsGetCurrentContext();

CGPoint curPoint = [(NSValue*)[points objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(context, curPoint.x, curPoint.y);

for( int i = 1; i < [points count]; i++ ) {
    curPoint = [(NSValue*)[points objectAtIndex:i] CGPointValue];
    CGContextAddLineToPoint(context, curPoint.x, curPoint.y);
}

// Set your 1 pixel highlight color here using CGContextSetRGBStrokeColor or equivalent
// CGContextSetRGBStrokeColor(...)
CGContextSetLineWidth(context, 6.0);
CGContextStrokePath(context);


// Set your 4 pixel stroke color here using CGContextSetRGBStrokeColor or equivalent
// CGContextSetRGBStrokeColor(...)
CGContextSetLineWidth(context, 4.0);
CGContextStrokePath(context);

Another idea would be setting up a shadow via CGContextSetShadowWithColor(context, CGSizeZero, 1.0, yourHighlightColorHere) prior to drawing the stroke, although this won't draw the highlight color with full opacity. (I also can't remember if shadows property shadow strokes - I have only used them with fills)

Answer 5

To add an answer to my own question, it can be done by drawing a line a few pixels wider in the highlight colour followed by the actual line on top. This produces the outline effect.