Question

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

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

控制台日志命令：

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

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

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

有没有办法让这种动态变化？

Answer 1

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

所以在“object：scaling”事件中：

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

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

2 个答案: