选择后，Fabric.js对象会跳到右下角 - 如何防止它？

Question

我有一个fabric.js画布，我可以移动对象。有时，突然间，物体会跳到右下方。这是看起来像：

似乎正在发生的是创建一个使用对象的顶部和左侧坐标的组。但是组内的对象还会添加相对于组的顶部和左侧坐标。因此，对象的顶部和左侧坐标是它们应该的两倍大。

这不会持续发生。它通常在我快速点击时发生，但有时在我拖动时发生。大部分时间它都可以正常工作。

我想知道的是为什么会发生这种情况，更重要的是，如何防止它。

我应该注意到，当我更新画布时会发生很多事情 - 比我在这里粘贴的方式更多。重写图层，绘制图像，更新UI。我猜测某些东西没有以正确的顺序加载，但我不确定是什么。

Answer 1

我明白了。

我在渲染画布时一直在清除所选对象，我需要这样做才能保持渲染的一致性。我稍后会恢复选择：

canvas.on('object:modified',function(){
  var active_objects = canvas.getActiveObjects();
  canvas.discardActiveObject();

  // rendering code

  var sel = new fabric.ActiveSelection(active_objects,{
     canvas: canvas,
  });
  sel.setObjectsCoords();
  sel.setCoords();
  canvas.setActiveObject(sel);
  canvas.requestRenderAll(); 
});

问题在于，如果在调用canvas.setActiveObject（sel）之前创建了一个新选择，则新选择将变得混乱，对象将向右下方。

使用简单的if语句修复：

if (canvas.getActiveObjects().length < 1){
   var sel = new fabric.ActiveSelection(active_objects,{
      canvas: canvas,
   });
   sel.setObjectsCoords();
   sel.setCoords();
   canvas.setActiveObject(sel);
   canvas.requestRenderAll();
}

这可能与我的项目有关。