CODEWITHSUNDEEP
javascriptfabricjs
StAR_161
StAR_161

Reputation: 658

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

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?

Upvotes: 3

Views: 15699

Answers (2)

LuckyTuvshee
LuckyTuvshee

Reputation: 1194

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

Upvotes: 0

John
John

Reputation: 2033

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/

Upvotes: 13

Related Questions