Fabric.js：缩放后如何正确计算圆形的面积？

这个问题的核心原因是：你原来的代码用的是圆形创建时的初始radius值，但Fabric.js在缩放对象时，不会自动修改obj.radius这个原始属性，而是通过scaleX/scaleY记录缩放比例。所以要计算缩放后的实际面积，得结合缩放比例算出当前的实际半径，或者直接获取缩放后的实际尺寸来计算。

解决方案1：动态计算当前实际半径 #

修改你的calculateArea函数，在计算圆形面积时，结合缩放比例得到当前的实际半径：

function calculateArea(obj){ 
  switch (obj.type){ 
    case 'circle': 
      // 圆形默认等比缩放，scaleX和scaleY一致，用初始半径×缩放比例得到当前半径
      const currentRadius = obj.radius * obj.scaleX;
      const area = Math.PI * currentRadius * currentRadius;
      alert(area.toFixed(2)); 
      break; 
    case 'rect': 
      // 矩形同样要考虑缩放，计算缩放后的实际宽高乘积
      const scaledWidth = obj.width * obj.scaleX;
      const scaledHeight = obj.height * obj.scaleY;
      alert((scaledWidth * scaledHeight).toFixed(2));
      break; 
  } 
}

解决方案2：用Fabric.js内置方法获取缩放后尺寸（更可靠） #

Fabric.js自带getScaledWidth()和getScaledHeight()方法，会自动处理缩放、翻转等场景，直接返回对象当前的实际尺寸，用这个方法计算更稳妥：

function calculateArea(obj){ 
  switch (obj.type){ 
    case 'circle': 
      // 圆形的实际直径等于缩放后的宽度，除以2得到当前半径
      const currentDiameter = obj.getScaledWidth();
      const currentRadius = currentDiameter / 2;
      const area = Math.PI * Math.pow(currentRadius, 2);
      alert(area.toFixed(2)); 
      break; 
    case 'rect': 
      const rectArea = obj.getScaledWidth() * obj.getScaledHeight();
      alert(rectArea.toFixed(2));
      break; 
  } 
}

补充说明 #

你在object:scaling事件里打印的obj.width*obj.scaleX其实就是圆形缩放后的实际直径，把这个值除以2也能得到当前半径，和上面两种方法的逻辑是一致的。

另外要注意：原来的矩形面积计算也有同样的问题，只使用初始宽高会导致缩放后面积不更新，所以也需要同步修改为计算缩放后的实际尺寸。

内容的提问来源于stack exchange，提问作者Sachin Vairagi