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