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

Question

我试图让形状属性在缩放形状时动态更新。

这是一个小提琴： http : //jsfiddle.net/anirudhrantsandraves/DAjrp/

控制台日志命令：

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

应该在缩放时动态显示形状的高度和宽度。

当形状被缩放时，控制台中的属性保持不变。 但是，当我再次选择对象并对其进行缩放时，会显示属性的先前值。

有没有办法让这个动态？

Answer 1

getWidth()和getHeight()用于获取 Fabric.js 中的当前宽度和高度。

所以在“对象：缩放”事件中：

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

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

将服务于您的目的。

更新小提琴 - http://jsfiddle.net/DAjrp/2/

Answer 2

以防万一，如果您想获得缩放高度

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