Drawing a dashed line with CGContextSetLineDash

Question

I'm trying to draw a dashed line with CGContextSetLineDash.

Here's my code:

float dashPhase = 0.0;
float dashLengths[] = {30, 30};
CGContextSetLineDash(context, dashPhase, dashLengths, 20.0);
self.previousPoint2 = self.previousPoint1;
self.previousPoint1 = previous;
self.currentPoint = current;

self.mid1 = [self pointBetween:self.previousPoint1 andPoint:self.previousPoint2];
self.mid2 = [self pointBetween:self.currentPoint andPoint:self.previousPoint1];

UIBezierPath* newPath = [UIBezierPath bezierPath];

[newPath moveToPoint:self.mid1];
[newPath addLineToPoint:self.mid2];
[newPath setLineWidth:self.brushSize];

However, if I draw slowly, they dashed lines do not appear (see top of image below) but if I draw quickly, they do appear (see bottom of image below).

Why is this happening?

Answer 1

You have set dashPhase = 0., therefore each time you start a new line, the pattern starts with a 30 unit painted segment, followed by a 30 unit unpainted segment. If the line segments are short, the entire line will be painted.

So either you use a single path, where you only append line segments, or you compute for each new subpath the dashPhase where to start the pattern.

(Shouldn't the last parameter of CGContextSetLineDash be the length of the dashLengths[], i.e. 2 ?)

UPDATE: As we figured out in the discussion, the solution to the problem was indeed to add line segments to the last bezier path as long as the user draws the same curve:

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    // ...
    // Compute nextPoint to draw ...
    UIBezierPath *lastPath = [self.paths lastObject]; 
    [lastPath addLineToPoint:self.nextPoint];
    // ...
}