ios - 带有 CGContextStrokePath 的虚线

Question

我正在开发一个应用程序，用户应该可以在其中用手指画线。用户可以启用虚线，但我在尝试这样做时遇到了一个奇怪的问题。如果用户缓慢拖动手指，则会出现一条实线，但如果快速拖动手指，则会出现虚线。无论启用时如何，我都希望出现破折号。问题显示在下面的 gif 中:

我正在使用 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];
}

drawingView 使用controlsPoints、points 和movePoints 来绘制线条:

- (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: 在 drawRect: 中调用。

我做错了什么，因为在缓慢拖动时不会出现破折号？

我已经看到了 Drawing a dashed line with CGContextSetLineDash并尝试了 CGPathAddLineToPoint 以查看它是否有所作为，但没有。我遇到了完全相同的问题。

Answer 1

问题是您在每个后续点之间绘制单独的路径，并且每条路径都以新的破折号模式开头。如果手指移动缓慢，则绘制很多很短的路径。如果路径短于 10 个点(第一个绘制的破折号长度)然后根本看不到破折号图案。

以下伪代码有望展示解决此问题的思路。而不是

for i = 1 ... N {
    move to point[i-1] 
    curve to point[i]
    set line dash
    stroke path
}

应该是

move to point[0]
for i = 1 ... N {
    curve to point[i]
}
set line dash
stroke path