FabricJs中多边形拖动变形时同步移动顶点圆形的异常问题

我之前在FabricJS里折腾顶点控件时也碰到过一模一样的坑，这种变形后多边形额外位移的情况，大概率是坐标转换逻辑出错或者事件处理时重复修改了多边形位置属性导致的，具体拆解下：

1. 最常见的坑：顶点坐标没做正确的坐标系转换 #

FabricJS里，多边形的顶点是基于自身left/top的局部坐标，而拖动变形时的鼠标坐标是画布全局坐标。如果直接用全局坐标去同步顶点或圆形位置，没做坐标系转换，就会把画布的全局位移也算进去，导致多边形被“额外移动”。

解决方法：
处理坐标时一定要用Fabric提供的转换方法：

• 全局坐标转多边形局部坐标：polygon.toLocalPoint(new fabric.Point(globalX, globalY))
• 局部坐标转全局坐标（用来设置圆形位置）：polygon.toGlobalPoint(new fabric.Point(localX, localY))

2. 误改了多边形的left/top属性 #

Fabric在变形时会自动更新多边形的left/top和points数组，如果你同步圆形位置时手动修改了left/top，就会导致双重位移叠加。

解决方法：
只需要更新多边形的points数组（如果需要的话），不要手动调整left和top——Fabric会根据顶点自动计算并更新位置和边界框。

3. 事件触发时机不对，重复执行位移逻辑 #

Fabric变形会触发before:transform、transform、object:modified等多个事件，如果你的同步逻辑绑定了多个事件，或者在事件里重复调用renderAll()，就可能导致多边形位置被多次更新。

解决方法：

• 若只需变形结束后同步，把逻辑绑定到object:modified事件；
• 若要实时同步，在transform事件里只更新圆形位置，不要修改多边形的points——Fabric在变形过程中已经自动更新了顶点，你只需要基于最新points同步圆形即可，且不要在transform事件里调用renderAll()（Fabric会自动渲染）。

4. 忽略了画布的缩放/平移 #

如果画布有缩放（zoom）或平移（viewportTransform），坐标转换时没考虑这些因素，计算出的位置会有偏差，看起来像多边形额外移动了。

解决方法：
先把鼠标坐标转成画布实际坐标，再做局部转换：

const mousePoint = new fabric.Point(e.e.clientX, e.e.clientY);
const canvasPoint = canvas.getPointer(mousePoint); // 考虑画布缩放/平移的坐标
const localPoint = polygon.toLocalPoint(canvasPoint);

可行的代码示例参考 #

// 假设已创建多边形polygon和顶点圆形数组circles
// 变形结束后同步圆形位置
polygon.on('modified', function() {
  this.points.forEach((point, index) => {
    // 把多边形局部顶点转成全局坐标
    const globalPoint = this.toGlobalPoint(point);
    // 更新对应圆形位置（减去半径让圆心对齐顶点）
    circles[index].set({
      left: globalPoint.x - circles[index].radius,
      top: globalPoint.y - circles[index].radius
    });
    circles[index].setCoords(); // 必须调用更新圆形边界框
  });
  canvas.renderAll(); // 统一渲染，不要在循环里调用
});

// 实时同步圆形位置（变形过程中）
polygon.on('transform', function() {
  this.points.forEach((point, index) => {
    const globalPoint = this.toGlobalPoint(point);
    circles[index].set({
      left: globalPoint.x - circles[index].radius,
      top: globalPoint.y - circles[index].radius
    });
    circles[index].setCoords();
  });
  // 这里不用调用renderAll，Fabric变形时会自动渲染
});

注意：全程不要删除重建圆形（避免用到clear()），直接修改现有圆形的位置即可，不会影响画布背景图。

内容的提问来源于stack exchange，提问作者Nir.L