移动时更新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

萨米，

你正在做的事情是错误的。共达和getLeft做工精细的1.7版本

检查这个代码：

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

UPDATE：

如果你想有旋转你以后每次做渲染：

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

希望，它会帮助你。