Fabric.js拖拽选中需求：仅命中对象边框区域才触发选中

要实现拖拽框选仅命中对象黑色线条边框才选中的效果，需要重写Fabric.js默认的选框命中逻辑——因为原生逻辑是基于对象的** bounding box（包围盒）**进行检测的，无法直接满足精准边框命中的需求。以下是具体实现方案：

核心思路 #

1. 拦截画布的selection:created事件，在选框生成后过滤默认选中的对象
2. 对每个候选对象，提取或生成其边框的路径数据（针对基础形状需手动生成边框路径）
3. 用Fabric内置的几何工具检测选框矩形与对象边框路径的交集，仅保留存在交集的对象

代码实现 #

// 初始化Fabric画布
const canvas = new fabric.Canvas('canvas');

// 添加示例测试对象
const linePath = new fabric.Path('M 100 100 L 200 200 L 100 300 Z', {
  stroke: 'black',
  fill: 'transparent',
  strokeWidth: 2
});
const borderRect = new fabric.Rect({
  left: 300,
  top: 100,
  width: 100,
  height: 100,
  stroke: 'black',
  fill: 'transparent',
  strokeWidth: 2
});
canvas.add(linePath, borderRect);

// 重写选框选中逻辑
canvas.on('selection:created', function(e) {
  const selectionRect = e.target;
  const preciseSelected = [];

  // 遍历画布所有可见对象
  canvas.getObjects().forEach(obj => {
    if (obj === selectionRect) return; // 跳过选框本身

    // 获取对象的边框路径
    let targetPath;
    if (obj.type === 'path') {
      targetPath = obj;
    } else {
      // 为基础形状生成边框路径（适配旋转、缩放变换）
      const { left, top, width, height, angle, scaleX, scaleY } = obj;
      const rectPathStr = `M ${left} ${top} L ${left+width} ${top} L ${left+width} ${top+height} L ${left} ${top+height} Z`;
      targetPath = new fabric.Path(rectPathStr, {
        strokeWidth: obj.strokeWidth,
        angle,
        scaleX,
        scaleY,
        originX: 'left',
        originY: 'top'
      });
    }

    // 构造选框矩形的坐标范围
    const rectRange = {
      x1: selectionRect.left,
      y1: selectionRect.top,
      x2: selectionRect.left + selectionRect.width,
      y2: selectionRect.top + selectionRect.height
    };

    // 检测选框与对象边框是否存在交集
    const intersections = fabric.Intersection.intersectRectPath(rectRange, targetPath.path);
    if (intersections.length > 0) {
      preciseSelected.push(obj);
    }
  });

  // 替换默认选中结果为精准命中的对象
  canvas.discardActiveObject();
  if (preciseSelected.length > 0) {
    canvas.setActiveObject(new fabric.ActiveSelection(preciseSelected, { canvas }));
  }
  canvas.renderAll();
});

// 优化选框触发逻辑
canvas.selection = false;
canvas.on('mouse:down', o => {
  if (!o.target) canvas.selection = true; // 仅在空白区域点击时开启选框
});
canvas.on('mouse:up', () => {
  canvas.selection = false;
});

关键说明 #

• 利用fabric.Intersection.intersectRectPath完成矩形与路径的交集检测，这是Fabric原生提供的几何计算工具，无需额外依赖
• 针对非路径类基础对象（矩形、圆形等），需要手动生成其边框路径，并同步应用对象的旋转、缩放变换，确保检测准确性
• 通过selection:created事件拦截默认选中结果，替换为精准检测后的对象列表，完全覆盖原生选框逻辑

性能优化提示 #

• 如果画布对象数量较多，可在遍历前添加过滤条件（如仅检测obj.visible === true的对象）
• 对于频繁变换的复杂路径，可缓存其变换后的路径数据，避免每次检测都重新生成

内容的提问来源于stack exchange，提问作者Nazrin P.B