在object:scaling事件中获取对象缩放后的实际宽高

我懂你想在缩放Fabric.js对象的过程中实时拿到它的实际显示尺寸，你当前的代码没达到预期，大概率是因为object:scaling事件触发时，对象的属性更新时机或者计算方式有问题。

解决方案：使用Fabric.js内置方法 #

Fabric.js的对象实例本身提供了专门的方法来获取缩放后的实际尺寸，这些方法会自动处理缩放、翻转等各种情况，比手动计算更可靠：

canvas.on('object:scaling', function(e) {
  const targetObj = e.target;
  // 获取实际宽度（已考虑scaleX、flipX等因素）
  const actualWidth = targetObj.getScaledWidth();
  // 获取实际高度（已考虑scaleY、flipY等因素）
  const actualHeight = targetObj.getScaledHeight();
  
  console.log(`当前实际宽度：${actualWidth}，实际高度：${actualHeight}`);
});

为什么你的原代码可能失效？ #

• 时机问题：在object:scaling事件触发的瞬间，对象的scaleX/scaleY属性可能还未完成最新值的同步，导致计算结果不准确。
• 翻转场景忽略：如果对象开启了flipX或flipY，直接用width * scaleX会得到负数，而getScaledWidth()会自动返回绝对值的正确尺寸。

如果一定要手动计算，也可以修正为：

// 手动计算时记得取绝对值，适配翻转场景
const actualWidth = targetObj.width * Math.abs(targetObj.scaleX);
const actualHeight = targetObj.height * Math.abs(targetObj.scaleY);

但还是更推荐使用官方提供的getScaledWidth()和getScaledHeight()方法，后续Fabric.js版本更新时，这些方法会自动适配新的属性逻辑，减少维护成本。

内容的提问来源于stack exchange，提问作者Pedro Jose