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