Question

我正试图在移动时获取对象的x和y坐标。我在getLeft()上使用getTop()和object:moving方法。但是，如果旋转对象，这些方法无济于事。

然后我尝试使用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类中删除。顶部和左侧的属性在object:moving事件中更新，因此您可以直接访问它们；但是，这些属性反映了Fabric对象的aCoords或绝对坐标，而与画布的zoom值如何更改该对象的坐标无关。

oCoords考虑到结构对象的位置，包括该对象的viewportTransform和padding属性。

尽管Fabric.js documentation当前声称：“无需使用@method calcCoords进行更新，您就可以计算[oCoords]，” oCoords实际上并未出现由object:moving事件更新。

因此，您需要在事件返回的对象上调用calcCoords方法，以获取代表画布缩放值和对象填充的坐标。

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

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};
})

希望这会有所帮助！

Answer 2

塞米，

你做错了什么。 getTop和getLeft适用于版本1.7

检查此代码：

canvas.on('object:moving',function(e){
    if (e.target){
        console.log(e.target.getTop());
      console.log(e.target.getLeft());
    }
 });

<强>更新

如果您希望旋转，则必须在每次渲染后进行：

canvas.on('after:render', function() {
    canvas.contextContainer.strokeStyle = '#555';
    canvas.forEachObject(function(obj) {
      var bound = obj.getBoundingRect();
      canvas.contextContainer.strokeRect(
        bound.left + 0.5,
        bound.top + 0.5,
        bound.width,
        bound.height
      );
    });

    var ao = canvas.getActiveObject();
  if (ao) {
    var bound = ao.getBoundingRect();
     console.log(bound.left);
     console.log(bound.top);
   }   
  });

此代码将在每次渲染后为每个形状绘制边界框。如果要隐藏边界框，只需删除此代码：

canvas.contextContainer.strokeStyle = '#555';
        canvas.forEachObject(function(obj) {
          var bound = obj.getBoundingRect();
          canvas.contextContainer.strokeRect(
            bound.left + 0.5,
            bound.top + 0.5,
            bound.width,
            bound.height
          );
        });

这是fiddle

希望它会对你有帮助。

移动时更新fabricjs对象坐标

2 个答案: