javascript - 移动时更新fabricjs对象坐标

Question

我正在尝试获取对象移动时的 x 和 y 坐标。我在 object:moving 上使用 getLeft() 和 getTop() 方法。但如果对象旋转，这些方法就没有帮助。

然后我尝试使用 object.getBoundRect().top 获取对象边界框的顶部和左侧。但这不会动态更新。它给出移动操作开始时的边界框值。有没有办法在移动时获取边界框值？

canvas.on('object:moving', function(e) {
  var scaledObject = e.target;
  $('#mouse-info').text("X:"+parseInt(scaledObject.getBoundingRect().left)+", Y:"+parseInt(scaledObject.getBoundingRect().top));
});

Answer 1

从 Fabric.js 版本 2.4.4 开始，getLeft() 和 getTop() 方法已从 Fabric Object 类中删除。 top 和 left 属性在 object:moving 事件上更新，因此您可以直接访问它们；但是，这些属性反射(reflect)了 Fabric 对象的 aCoords 或绝对坐标，而不考虑 Canvas 的缩放值如何更改该对象的坐标。

oCoords 考虑了 Fabric 对象的位置，包括该对象的 viewportTransform 和 padding 属性。

尽管 Fabric.js documentation目前声称，“您可以计算 [oCoords]，而无需使用 @method calcCoords 进行更新”，oCoords 实际上似乎并未由 对象更新:移动事件。

因此，您需要对事件返回的对象调用 calcCoords 方法，以获取考虑 Canvas 缩放值和对象填充的坐标。

这是一个可行的解决方案:

fabricCanvas.on("object:moving", function(e) {
    var actObj = e.target;
    var coords = actObj.calcCoords(); 
    // calcCoords returns an object of corner points like this 
    //{bl:{x:val, y:val},tl:{x:val, y:val},br:{x:val, y:val},tr:{x:val, y:val}}
    var left = coords.tl.x;
    var top = coords.tl.y;
    return {left:left,top:top};
})

希望这有帮助!