如何在fabric.js中编程实现多选？选中后Bounding Box位置异常

问题描述 #

我尝试选中多个Fabric.js对象进行批量操作，步骤如下：

1. 将SVG文件加载为Fabric组；
2. 点击按钮筛选目标对象，创建ActiveSelection。
   但选中后的包围盒（Bounding Box）位置不符合预期，预期应包围3个id为dot的绿色圆点，但实际位置偏移。我注意到setCoords()方法，但不确定是否和问题相关，因为我并未修改组内对象的坐标。

问题原因 #

你尝试直接使用组内的子元素创建ActiveSelection，但Fabric.js的ActiveSelection仅能正确处理画布的顶层子对象。组内元素的left/top坐标是相对于父组的局部坐标，而非画布全局坐标，因此ActiveSelection计算包围盒时会误用这些局部坐标，导致位置错误。

解决方案 #

根据是否需要保留原组结构，选择以下两种方式：

方式1：将目标元素提取为画布顶层对象（简单直接，会修改组结构）

将目标元素从组中移除，转为画布的直接子元素，再创建ActiveSelection：

<button id="multiselect">Multi Select</button>
<canvas id="canvas"></canvas>

const canvas = new fabric.Canvas("canvas", {
  height: 500,
  width: 500
});

let svgGroup; // 保存SVG组的全局引用
const url = "https://assets.codepen.io/496640/dots3.svg";

fabric.loadSVGFromURL(url, function (objects, options) {
  svgGroup = fabric.util.groupSVGElements(objects, options);
  canvas.add(svgGroup);
  canvas.renderAll();
});

function selectObjectsByIds({ canvas, ids }) {
  canvas.discardActiveObject();

  // 从组中筛选目标元素
  const targetObjects = svgGroup._objects.filter(o => ids.includes(o.id));
  
  // 将元素从组中移除，转换为画布顶层对象
  targetObjects.forEach(obj => {
    svgGroup.remove(obj);
    // 计算元素的全局坐标（考虑组的平移、缩放、旋转变换）
    const matrix = svgGroup.calcTransformMatrix();
    const absolutePos = fabric.util.transformPoint(new fabric.Point(obj.left, obj.top), matrix);
    obj.left = absolutePos.x;
    obj.top = absolutePos.y;
    obj.parent = null;
    obj.setCoords();
    canvas.add(obj);
  });

  // 创建正确的ActiveSelection
  const selection = new fabric.ActiveSelection(targetObjects, { canvas });
  canvas.setActiveObject(selection);
  canvas.requestRenderAll();
}

const multiselect = document.getElementById("multiselect");
multiselect.onclick = () => selectObjectsByIds({ canvas, ids: ['dot'] });

方式2：克隆元素并同步操作（保留原组结构）

如果不想破坏原组结构，可以克隆目标元素，基于克隆创建ActiveSelection，并将克隆的操作同步回原组内的元素：

const canvas = new fabric.Canvas("canvas", {
  height: 500,
  width: 500
});

let svgGroup;
const url = "https://assets.codepen.io/496640/dots3.svg";

fabric.loadSVGFromURL(url, function (objects, options) {
  svgGroup = fabric.util.groupSVGElements(objects, options);
  canvas.add(svgGroup);
  canvas.renderAll();
});

function selectObjectsByIds({ canvas, ids }) {
  canvas.discardActiveObject();

  // 筛选组内目标元素
  const targetObjects = svgGroup._objects.filter(o => ids.includes(o.id));
  // 克隆元素并转换为全局坐标
  const clones = targetObjects.map(obj => {
    const clone = obj.clone();
    const matrix = svgGroup.calcTransformMatrix();
    const absolutePos = fabric.util.transformPoint(new fabric.Point(obj.left, obj.top), matrix);
    clone.left = absolutePos.x;
    clone.top = absolutePos.y;
    clone.scaleX = obj.scaleX * svgGroup.scaleX;
    clone.scaleY = obj.scaleY * svgGroup.scaleY;
    clone.angle = obj.angle + svgGroup.angle;
    clone.setCoords();
    return clone;
  });

  // 添加克隆到画布
  clones.forEach(clone => canvas.add(clone));

  // 创建ActiveSelection
  const selection = new fabric.ActiveSelection(clones, { canvas });
  canvas.setActiveObject(selection);
  canvas.renderAll();

  // 同步克隆的操作到原元素
  const syncChanges = () => {
    clones.forEach((clone, idx) => {
      const original = targetObjects[idx];
      // 将克隆的全局坐标转换回组内相对坐标
      const relativePos = svgGroup.toLocalPoint(new fabric.Point(clone.left, clone.top));
      original.left = relativePos.x;
      original.top = relativePos.y;
      original.scaleX = clone.scaleX / svgGroup.scaleX;
      original.scaleY = clone.scaleY / svgGroup.scaleY;
      original.angle = clone.angle - svgGroup.angle;
      original.setCoords();
    });
    svgGroup.setCoords();
    canvas.renderAll();
  };

  // 监听变换事件
  selection.on('moving scaling rotating', syncChanges);

  // 取消选中时清理克隆
  canvas.once('selection:cleared', () => {
    clones.forEach(clone => canvas.remove(clone));
    selection.off('moving scaling rotating', syncChanges);
  });
}

const multiselect = document.getElementById("multiselect");
multiselect.onclick = () => selectObjectsByIds({ canvas, ids: ['dot'] });

关键说明 #

• setCoords()：用于更新元素的边界框坐标，确保Fabric.js能正确计算元素的碰撞和位置；
• calcTransformMatrix()：获取组的变换矩阵，用于将组内局部坐标转换为画布全局坐标；
• toLocalPoint()：将全局坐标转换回组内局部坐标，实现克隆与原元素的操作同步。

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