CGPath with outline

Question

I am trying to draw a CGPath that has a stroke for it's stroke.

Basically I want a draw a line using CGPath. I then want to go back and draw lines on both sides of the last CGPath giving it the effect that it is outlines.

This line can bend and turn in any way but I always need the two lines on the outside to follow.

Path

EDIT: I need to be able to make the middle of the line transparent but the outlines solid black.

refer this url http://stackoverflow.com/questions/5434874/draw-a-line-by-using-cgpath — Dixit Patel, Jan 16 '13 at 21:27

score 15 · Accepted Answer · answered Jan 16 '13 at 21:37

Use CGPathCreateCopyByStrokingPath to create a new path by stroking your old path at some width. Then draw your new path using kCGPathFillStroke.

- (void)drawRect:(CGRect)rect {
  CGContextRef context = UIGraphicsGetCurrentContext();

  CGMutablePathRef path = CGPathCreateMutable();
  CGPathMoveToPoint(path, NULL, 50, 50);
  CGPathAddLineToPoint(path, NULL, 200, 200);

  CGPathRef thickPath = CGPathCreateCopyByStrokingPath(path, NULL, 10, kCGLineCapButt, kCGLineJoinBevel, 0);
  CGContextAddPath(context, thickPath);

  CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
  CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
  CGContextSetLineWidth(context, 3);
  CGContextDrawPath(context, kCGPathFillStroke);

  CGPathRelease(thickPath);
  CGPathRelease(path);
}

How do I draw two differents CGPath and give each its own color? — Van Du Tran, Dec 21 '13 at 17:36

score 5 · Answer 2 · edited Aug 25 '14 at 13:41

The simplest solution would just be to stroke the path twice. First with black at a bigger stroke width and then stroke the same path again using the blue color with a slightly smaller stroke width.

Edit:
If I remember correctly you can use CGPathCreateCopyByStrokingPath(...) to create a new path that you then can both stroke and fill. Then you could use semi-transparent colors.

From the documentation:

CGPathCreateCopyByStrokingPath

Creates a stroked copy of another path.
CGPathRef CGPathCreateCopyByStrokingPath(
                                         CGPathRef path,
                                         const CGAffineTransform *transform,
                                         CGFloat lineWidth,
                                         CGLineCap lineCap,
                                         CGLineJoin lineJoin,
                                         CGFloat miterLimit 
                                         ); 
Parameters
path
The path to copy.

transform
A pointer to an affine transformation matrix, or NULL if no transformation is needed. If specified, Quartz applies the transformation to elements of the converted path before adding them to the new path.

lineWidth
The line width to use, in user space units. The value must be greater than 0.

lineCap
A line cap style constant—kCGLineCapButt (the default), kCGLineCapRound, or kCGLineCapSquare. See “CGLineCap”.

lineJoin
A line join value—kCGLineJoinMiter (the default), kCGLineJoinRound, or kCGLineJoinBevel. See “CGLineJoin”.

miterLimit
The miter limit to use.

I want the middle color to be simi-transparent though. Adding a black larger line behind it would make that impossible. — endy, Jan 16 '13 at 21:26
@VivekSehrawat A quick online search shows that it's [`copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)`](https://developer.apple.com/reference/coregraphics/cgpath/2427133-copy). — David Rönnqvist, Apr 20 '17 at 11:15

CGPath with outline

2 Answers2

`CGPathCreateCopyByStrokingPath`

Linked