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

Here's a fiddle: /

The console log mands:

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?

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

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

The console log mands:

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?

• javascript
• fabricjs

Share Follow asked Feb 27, 2014 at 0:13 StAR_161StAR_161 65822 gold badges88 silver badges2020 bronze badges 1

• you need to use other events to track details dynamically.. – Dakshika Commented Feb 28, 2014 at 1:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

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/DAjrp/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;
        // ...
    });
});