如何在 iPhone 应用程序中用手指绘制虚线？

Posted 2023-03-10

【中文标题】如何在 iPhone 应用程序中用手指绘制虚线？

【英文标题】：How to draw dashed line with finger in iPhone app?

【发布时间】：2013-02-06 12:40:18

【问题描述】：

我需要通过在 iPhone 屏幕上滑动手指在常规间隙处绘制一条带有破折号的线。我为此编写了以下代码，它正在绘制虚线，但间隙不规则，因此看起来不太好。我还提供了显示问题的视频的链接，请帮助！

视频链接： https://dl.dropbox.com/u/56721867/Screen%20Recording%207.mov

   CGPoint mid1 = midPoint__5(previousPoint1, previousPoint2);
   CGPoint mid2 = midPoint__5(currentPoint, previousPoint1);
   CGContextRef context = UIGraphicsGetCurrentContext();
   [self.layer renderInContext:context];
   self.lineColor=[arrObj objectAtIndex:colorTag];
   CGContextMoveToPoint(context, mid1.x, mid1.y);
   CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
   CGContextSetLineCap(context, kCGLineCapRound);//use for making circle ,rect or line effect===============
   CGFloat dashArray[] = 2,8,2,8;
   CGContextSetLineDash(context,2,dashArray, 4);
   CGContextSetLineWidth(context, self.lineWidth);
   self.lineColor=[arrObj objectAtIndex:[AppHelper userDefaultsForKey:@"ColorTag"].intValue];//color tag on button click
   CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
   CGContextSetAlpha(context, 1.0);
   CGBlendMode blendStyle=isErase?kCGBlendModeClear:kCGBlendModeNormal; 
   CGContextSetBlendMode(context,blendStyle);
   CGContextStrokePath(context);
   [super drawRect:rect];

【参考方案1】：

从代码中看不太清楚，但根据视频和预感，我猜用手指轻扫一次会变成几条线段。这意味着冲刺从头开始多次，在视频中创建效果。您可能需要一个 NSMutableArray 将所有这些 currentPoint 放入其中，然后每次重绘时将它们全部绘制为一条线。

这个问题有更多关于如何用这种方式画线的信息：iPhone Core Graphics thicker dashed line for subview

【讨论】：

我同意这个猜测。在您的 drawRect 中，您应该有一个遍历所有点的循环，并为每个点执行 CGContextAddQuadCurveToPoint，然后是单个 CGContextStrokePath。

【参考方案2】：

这是执行您尝试的代码，它使用 Quartz 而不是 CoreGraphics。您可以使用 Quartz 或 CoreGraphics。

//
//  TestView.h
// 
//
//  Created by Syed Arsalan Pervez on 2/18/13.
//  Copyright (c) 2013 SAPLogix. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface TestView : UIView

    NSMutableArray *_points;


@end


//
//  TestView.m
// 
//
//  Created by Syed Arsalan Pervez on 2/18/13.
//  Copyright (c) 2013 SAPLogix. All rights reserved.
//

#import "TestView.h"

@interface UserPoint : NSObject

    BOOL _start;
    BOOL _end;
    CGPoint _point;


@property (assign, nonatomic) BOOL start;
@property (assign, nonatomic) BOOL end;
@property (assign, nonatomic) CGPoint point;

@end

@implementation UserPoint

@end

@implementation TestView

- (id)init

    self = [super init];
    if (self)
    
        _points = [NSMutableArray new];
    
    return self;


- (UserPoint *)addPoint:(CGPoint)point

    UserPoint *_userPoint = [UserPoint new];
    _userPoint.point = point;
    [_points addObject:_userPoint];
    [_userPoint release];

    return [_points lastObject];


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

    UITouch *touch = [touches anyObject];
    UserPoint *_userPoint = [self addPoint:[touch locationInView:self]];
    _userPoint.start = YES;
    _userPoint = nil;


- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

    UITouch *touch = [touches anyObject];
    UserPoint *_userPoint = [self addPoint:[touch locationInView:self]];
    _userPoint = nil;

    [self setNeedsDisplay];


- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

    UITouch *touch = [touches anyObject];
    UserPoint *_userPoint = [self addPoint:[touch locationInView:self]];
    _userPoint.end = YES;
    _userPoint = nil;

    [self setNeedsDisplay];


- (void)drawRect:(CGRect)rect

    [[UIColor blackColor] setStroke];
    [[UIColor blackColor] setFill];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path setLineWidth:15];
    CGFloat dash[] = 15,20;
    [path setLineDash:dash count:2 phase:0];
    [path setLineCapStyle:kCGLineCapRound];
    CGPoint lastPoint;
    for (UserPoint *_point in _points)
    
        if (_point.start || _point.end)
            [path moveToPoint:_point.point];
        else
        
            [path addQuadCurveToPoint:_point.point controlPoint:lastPoint];
        
        lastPoint = _point.point;
    
    [path stroke];


- (void)dealloc

    [_points release];

    [super dealloc];


@end

【讨论】：

添加四边形曲线需要复杂的计算，所以请明智地使用并优化它。

感谢您的代码，它正在工作，但我将如何擦除绘图？

@Developer 您可以通过多种方式进行操作，这取决于您要如何操作。一种方法是检测触摸并移除相交的点，并将相交的点的前一个点设置为 end = YES，将下一个点设置为 start = YES。

如何找到交叉点？您能否为此提供示例代码？真的很紧急！谢谢！