如何为用户绘制的线条添加TapGestureRecognizer？求最佳实现方案

嘿，这个问题我之前帮不少开发者捋清楚过——用drawRect:画出来的线条本质上只是视图图层上的像素，没有对应的可交互视图实例，确实没法直接绑定手势识别器。不过有几个靠谱的方案可以解决，你可以根据自己的场景选：

这是最直观的方式：给每一条线条创建一个独立的自定义UIView，在它的drawRect:里绘制线条，然后直接给这个视图添加手势识别器。这样每条线条都是一个可交互的实体，逻辑清晰，容易维护。

示例代码：

// 自定义LineView类
@interface LineView : UIView
@property (nonatomic, assign) CGPoint startPoint;
@property (nonatomic, assign) CGPoint endPoint;
@end

@implementation LineView
- (void)drawRect:(CGRect)rect {
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:self.startPoint];
    [linePath addLineToPoint:self.endPoint];
    [[UIColor blackColor] setStroke];
    linePath.lineWidth = 2.0; // 线条宽度
    [linePath stroke];
}
@end

// 在你的绘制逻辑里使用
- (void)drawLineFrom:(CGPoint)start to:(CGPoint)end {
    // 创建LineView，frame要覆盖线条所在的区域（可以设为父视图大小，避免点击区域受限）
    LineView *lineView = [[LineView alloc] initWithFrame:self.view.bounds];
    lineView.startPoint = start;
    lineView.endPoint = end;
    
    // 添加点击手势
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onLineTapped:)];
    [lineView addGestureRecognizer:tapGesture];
    
    [self.view addSubview:lineView];
}

// 手势回调
- (void)onLineTapped:(UITapGestureRecognizer *)gesture {
    LineView *tappedLine = (LineView *)gesture.view;
    NSLog(@"点击了从(%f,%f)到(%f,%f)的线条", tappedLine.startPoint.x, tappedLine.startPoint.y, tappedLine.endPoint.x, tappedLine.endPoint.y);
    // 这里处理你的点击逻辑
}

这个方案适合线条数量不多、需要给每条线条单独绑定不同交互逻辑的场景。

如果你的线条数量很多，创建大量自定义View会增加内存开销，这时候可以用CAShapeLayer绘制线条，然后在父视图上添加一个全局的点击手势，在回调里判断点击点是否落在某条线条的范围内。

核心思路是：保存所有绘制过的UIBezierPath，当用户点击时，遍历这些路径，检测点击点是否在路径的“可点击区域”内（注意要考虑线条宽度，避免用户必须精准点击像素）。

示例代码：

// 先声明一个数组保存所有路径
@property (nonatomic, strong) NSMutableArray<UIBezierPath *> *allLinePaths;

// 初始化数组
- (void)viewDidLoad {
    [super viewDidLoad];
    self.allLinePaths = [NSMutableArray array];
    
    // 给父视图添加全局点击手势
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onViewTapped:)];
    [self.view addGestureRecognizer:tapGesture];
}

// 绘制线条的逻辑
- (void)drawLineToTouchPoint:(CGPoint)touchPoint {
    CGPoint lastPoint = // 你的上一个绘制点
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:lastPoint];
    [linePath addLineToPoint:touchPoint];
    linePath.lineWidth = 2.0;
    
    // 用CAShapeLayer绘制到图层
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = linePath.CGPath;
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    shapeLayer.lineWidth = linePath.lineWidth;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    
    // 保存路径，用于后续点击检测
    [self.allLinePaths addObject:linePath];
}

// 全局手势回调，检测点击点
- (void)onViewTapped:(UITapGestureRecognizer *)gesture {
    CGPoint tapPoint = [gesture locationInView:self.view];
    
    for (UIBezierPath *path in self.allLinePaths) {
        // 为了提升用户体验，我们创建一个路径副本，把线宽扩大（比如加20），这样点击线条附近也能触发
        UIBezierPath *hitTestPath = [path copy];
        hitTestPath.lineWidth = path.lineWidth + 20;
        
        if ([hitTestPath containsPoint:tapPoint]) {
            NSLog(@"这条线条被点击了！");
            // 处理你的点击逻辑，比如高亮线条、弹出菜单等
            break; // 如果只需要处理第一个命中的线条，就break；如果要处理所有命中的，就去掉
        }
    }
}

这个方案适合线条数量多的场景，不用创建大量视图，内存开销更小。

如果觉得用扩大线宽的方式不够精准，也可以用CoreGraphics的CGPathContainsPoint函数，指定检测模式为kCGPathFillStroke，这样可以准确检测线条的填充+描边区域：

// 替换方案2里的containsPoint判断
CGPathRef cgPath = path.CGPath;
// 第三个参数是是否使用非零缠绕规则，第四个参数是变换矩阵（这里用CGAffineTransformIdentity即可）
BOOL isTapped = CGPathContainsPoint(cgPath, NULL, tapPoint, YES);

内容的提问来源于stack exchange，提问作者Rich Allen