Fabric.js: How to observe object:scaling event and update properties dynamically?

Question

I'm trying to get the shape properties to dynamically update when the shape is being scaled.

Here's a fiddle: http://jsfiddle.net/anirudhrantsandraves/DAjrp/

The console log commands:

console.log('Width =  '+scaledObject.currentWidth);
console.log('Height = '+scaledObject.currentHeight);

are supposed to dynamically display the height and width of the shape as it is being scaled.

The properties remain the same in the console when the shape gets scaled. However, when I select the object again and scale it, the previous values of the properties are displayed.

Is there a way to make this dynamic?

Answer 1

getWidth() and getHeight() are used to get the current width and height in Fabric.js.

So in "object:scaling" event:

canvas.on('object:scaling', onObjectScaled);

function onObjectScaled(e)
{
    var scaledObject = e.target;
    console.log('Width =  '+scaledObject.getWidth());
    console.log('Height = '+scaledObject.getHeight());
}

will serve your purpose.

Updated fiddle — http://jsfiddle.net/DAjrp/2/

Answer 2

Just in case, if you wanted to get the scaled height

canvas.on("object:scaling", (e) => {
    canvas.getActiveObjects().forEach((o) => {
        // if it's scaled then just multiple the height by scaler
        const objHeight = o.scaleY ? o.height * o.scaleY : o.height;
        // ...
    });
});