Dashed lines with CGContextStrokePath - ios

Question

I am developing an app where the user should be able to draw lines with the finger. The user can enable dashed lines, but I am having a strange problem when trying to do so. If the user drags the finger slowly a solid line appears, but when doing it fast the dashes appears. I would like the dashes to appear no matter what when enabled. The problem is shown on the gif below:
I am collecting the touch points with a UIPanGestureRecognizer:
-(void)dragGestureCaptured:(UIPanGestureRecognizer *)gesture
{
NSValue* touchPoint = [NSValue valueWithCGPoint:[gesture locationInView:self.drawingView]];
if(gesture.state == UIGestureRecognizerStateBegan)
{
[self initializePreviousPointValues:[touchPoint CGPointValue]];
}
else if (gesture.state == UIGestureRecognizerStateEnded)
{
EBLog(#"Dragging ends..");
return;
}
previousPoint2 = previousPoint1;
previousPoint1 = currentPoint;
currentPoint = [touchPoint CGPointValue];
CGPoint mid1 = midPoint(previousPoint1, previousPoint2);
CGPoint mid2 = midPoint(currentPoint, previousPoint1);
[self.drawingView addDrawColor:self.currentDrawColor];
[self.drawingView.controlPoints addObject:[NSValue valueWithCGPoint:previousPoint1]];
[self.drawingView.points addObject:[NSValue valueWithCGPoint:mid2]];
[self.drawingView.movePoints addObject:[NSValue valueWithCGPoint:mid1]];
[self.drawingView setNeedsDisplay];
}
The drawingView uses the controlsPoints, points and movePoints to draw the lines:
- (void)drawLinesInContext:(CGContextRef)context
{
for (int i = 0; i < [self.points count]; i++)
{
CGPoint movePoint = [[self.movePoints objectAtIndex:i] CGPointValue];
CGPoint controlPoint = [[self.controlPoints objectAtIndex:i] CGPointValue];
CGPoint point = [[self.points objectAtIndex:i] CGPointValue];
CGContextMoveToPoint(context, movePoint.x, movePoint.y);
CGContextAddQuadCurveToPoint(context, controlPoint.x, controlPoint.y, point.x, point.y);
NSNumber* colorHash = [self.colorHashes objectAtIndex:i];
UIColor* col = [self.colorsForHashValue objectForKey:colorHash];
CGFloat red = 0.0f, blue = 0.0f, green = 0.0f, alpha = 1.0f;
[col getRed:&red green:&green blue:&blue alpha:&alpha];
if (alpha == 0.0f)
{
penWidth = 15.0f;
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeClear);
}
else
{
penWidth = 5.0f;
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeNormal);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, alpha);
}
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, penWidth);
CGContextSetShouldAntialias(context, false);
CGContextSetAllowsAntialiasing(context, false);
if (self.drawDashedLines)
{
CGFloat dashLengths[] = {10.0f, 10.0f};
CGContextSetLineDash(context, 0.0f, dashLengths, 2);
}
CGContextStrokePath(context);
}
}
drawLinesInContext: is invoked in drawRect:.
What am I doing wrong, since the dashes don't appear when dragging slowly?
I have already seen the Drawing a dashed line with CGContextSetLineDash and tried the CGPathAddLineToPoint to see if it makes a difference, but it didn't. I was experiencing the exact same problem.

Answer 1

The problem is that you draw separate paths between each subsequent points, and
each path starts with a new dash pattern. If the finger is moved slowly, you draw
lots of very short path. It the path is shorter than 10 points (the first
dash length which is drawn) then no dash pattern is seen at all.
The following pseudo-code hopefully shows the idea how to solve this. Instead of
for i = 1 ... N {
move to point[i-1]
curve to point[i]
set line dash
stroke path
}
it should be
move to point[0]
for i = 1 ... N {
curve to point[i]
}
set line dash
stroke path