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

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

这是一把小提琴：

控制台日志命令：

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

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

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

有没有办法使其动态化？

getWidth（）

和

getHeight（）

用于获取Fabric.js中的当前宽度和高度

因此，在“对象：缩放”事件中：

这将符合你的目的

---

更新了小提琴-

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

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

---

您需要使用其他事件动态跟踪详细信息。当我尝试在缩放和移动时跟踪对象属性时，我面临另一个问题。我将创建的形状推送到全局数组中，观察对象：修改的事件。当我这样做的时候，缩放和移动都会消失。在下一个comment.canvas.on（'object:modified'，onObjectModified）中编写代码；函数onObjectModified（e）{var xScale，yScale，ht，wd，rad，oID，i，tp，lf；var modifiedObject=e.target；xScale=modifiedObject.get（'scaleX'）；yScale=modifiedObject.get（'scaleY'）；wd=modifiedObject.get（'width'）；rad=modifiedObject.get（'width'）/2；oID=modifiedObject.get（'identifier'））；lf=modifiedObject.get（'left'）；tp=modifiedObject.get（'top'）；for（i=0；iobject.getWidth和

object.getHeight

替换了版本2中的

object.getScaledWidth

和

object.getScaledHeight（）

，如下所述：。

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