FabricJS开启perPixelTargetFind后直线选择精度随角度异常问题

我之前在做Fabric项目时也遇到过一模一样的问题——设置perPixelTargetFind: true和targetFindTolerance: 15后，倾斜直线的选中体验很棒，但水平或垂直直线却几乎点不中，就像容差参数完全失效了一样。

问题根源 #

这其实是Fabric.js内部像素检测逻辑的一个小缺陷：当perPixelTargetFind开启时，对于水平/垂直直线这类像素宽度极窄的对象，即使设置了targetFindTolerance，检测逻辑也没有把容差区域正确扩展到直线的两侧。而倾斜直线因为自身的角度，绘制时的像素分布天然覆盖了更大的区域，刚好匹配了容差范围，所以能被正常选中。

解决方案：自定义直线类，重写目标检测逻辑 #

我们可以通过继承fabric.Line，重写它的_targetFind方法，手动处理水平/垂直直线的容差检测，让这类直线也能享受设置的targetFindTolerance。

下面是完整的示例代码，实现了：

• 自定义支持宽容差的直线类
• 选中时光标切换、直线变红的交互效果

// 自定义支持宽容差的直线类
fabric.TolerantLine = fabric.util.createClass(fabric.Line, {
  _targetFind: function(options) {
    // 如果不是水平或垂直直线，用默认的像素检测逻辑
    if (this.x1 !== this.x2 && this.y1 !== this.y2) {
      return this.callSuper('_targetFind', options);
    }
    
    // 处理水平/垂直直线：基于容差创建一个扩展的检测矩形
    const tolerance = this.targetFindTolerance || 0;
    let rectLeft, rectTop, rectWidth, rectHeight;
    
    if (this.x1 === this.x2) { // 垂直线
      rectLeft = this.x1 - tolerance;
      rectTop = Math.min(this.y1, this.y2);
      rectWidth = tolerance * 2;
      rectHeight = Math.abs(this.y2 - this.y1);
    } else { // 水平线
      rectLeft = Math.min(this.x1, this.x2);
      rectTop = this.y1 - tolerance;
      rectWidth = Math.abs(this.x2 - this.x1);
      rectHeight = tolerance * 2;
    }
    
    // 创建临时矩形用于检测点击
    const detectionRect = new fabric.Rect({
      left: rectLeft,
      top: rectTop,
      width: rectWidth,
      height: rectHeight,
      absolutePositioned: true
    });
    
    // 检测点击是否在扩展矩形内
    return detectionRect.containsPoint(options.pointer);
  }
});

// 初始化画布
const canvas = new fabric.Canvas('canvas', {
  perPixelTargetFind: true,
  targetFindTolerance: 15
});

// 添加测试直线：水平、垂直、倾斜
const horizontalLine = new fabric.TolerantLine([50, 100, 350, 100], {
  stroke: 'blue',
  strokeWidth: 2,
  originalStroke: 'blue'
});
const verticalLine = new fabric.TolerantLine([200, 50, 200, 350], {
  stroke: 'green',
  strokeWidth: 2,
  originalStroke: 'green'
});
const diagonalLine = new fabric.TolerantLine([50, 50, 350, 350], {
  stroke: 'purple',
  strokeWidth: 2,
  originalStroke: 'purple'
});

canvas.add(horizontalLine, verticalLine, diagonalLine);

// 实现光标切换和选中变红的效果
canvas.on('mouse:move', function(options) {
  canvas.defaultCursor = options.target ? 'pointer' : 'default';
});

canvas.on('selection:created', function(options) {
  options.target.set('stroke', 'red');
  canvas.renderAll();
});

canvas.on('selection:cleared', function() {
  canvas.getObjects().forEach(obj => {
    if (obj.type === 'tolerantLine') {
      obj.set('stroke', obj.originalStroke);
    }
  });
  canvas.renderAll();
});

效果说明 #

• 现在水平/垂直直线和倾斜直线一样，只要点击直线周围targetFindTolerance范围内的区域就能选中
• 保持了原有perPixelTargetFind对复杂形状的检测优势，只针对水平/垂直直线做了逻辑补充

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