Fabric.js中如何在对象移动结束后仅触发一次指定函数

嘿，我完全懂你的困扰！object:moving事件确实会在拖拽对象的整个过程中持续触发，导致你的recCanvas()被反复调用。要实现仅在移动结束时触发一次的效果，Fabric.js其实提供了专门的事件来处理这种场景——object:modified。

核心解决方案代码 #

直接把监听的事件从object:moving换成object:modified就可以了：

canvas.on('object:modified', function (event) {
  recCanvas(canvas); // 现在只会在移动结束后触发一次
});

为什么这个方法有效？ #

• object:moving：在对象被拖拽的实时过程中持续触发，每帧都会调用回调函数，所以会多次执行你的逻辑。
• object:modified：当对象的变换操作（包括移动、缩放、旋转等）完全结束（也就是用户松开鼠标，对象位置/状态确定后）才会触发一次，完美匹配你的需求。

进阶：仅过滤移动操作（可选） #

如果你的场景里需要区分“移动结束”和其他变换（比如缩放、旋转）结束，可以在回调里做个简单判断，确保只有移动操作才触发recCanvas()：

canvas.on('object:modified', function (event) {
  const obj = event.target;
  // 对比对象移动前后的坐标，判断是否是移动操作
  if (obj.left !== obj._originalLeft || obj.top !== obj._originalTop) {
    recCanvas(canvas);
  }
});

这样就能精准控制只在对象移动结束时执行你的函数啦！

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