我正在尝试获取对象移动时的 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));
});
最佳答案
从 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};
})
希望这有帮助!
关于javascript - 移动时更新fabricjs对象坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42373738/