Fabric.js：如何观察对象：缩放事件并动态更新属性？

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