javascript - Updating fabricjs object coordinates while moving - Stack Overflow

I'm trying to get the x and y coordinates of the object while its moving. I use getLeft() and getTop() methods on object:moving. But these methods don't help if the object is rotated.

Then I tried getting the top and left of the bounding box of the object using object.getBoundRect().top. But this doesn't get updated dynamically. It gives the bounding box value at the beginning of move operation. Is there a way to get the bounding box value while moving?

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

I'm trying to get the x and y coordinates of the object while its moving. I use getLeft() and getTop() methods on object:moving. But these methods don't help if the object is rotated.

Then I tried getting the top and left of the bounding box of the object using object.getBoundRect().top. But this doesn't get updated dynamically. It gives the bounding box value at the beginning of move operation. Is there a way to get the bounding box value while moving?

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

• javascript
• canvas
• fabricjs

Share Improve this question Follow edited Feb 21, 2017 at 17:16 Chris Hamilton 55555 silver badges2222 bronze badges asked Feb 21, 2017 at 17:12 AshTysonAshTyson 49377 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As of Fabric.js version 2.4.4, the getLeft() and getTop() methods have been removed from the Fabric Object class. The properties top and left are updated on the object:moving event, so you can access them directly; however, these properties reflect the aCoords, or Absolute Coordinates, of the Fabric Object without any regard to how the zoom value of the canvas changes that Object's coordinates.

The oCoords take into account a Fabric Object's position including that Object's viewportTransform and padding properties.

Despite the fact that the Fabric.js documentation currently claims, "You can calculate [the oCoords] without updating with @method calcCoords," the oCoords do not in fact appear to be updated by the object:moving event.

You therefore need to call the calcCoords method on the object returned by the event in order to get coordinates which account for the canvas zoom value and object padding.

Here is a working solution:

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

Hope this helps!

Sammy,

You are doing something wrong. getTop and getLeft work fine for version 1.7

Check this code:

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

UPDATE:

If you want to have with rotating you have to do after each render:

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

This code will draw for you bounding box for each shape after each render. If you want to hide bounding box just delete this code:

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

Here is a fiddle

Hopefully, it will help you.