Fabric.js椭圆修改后height、width等属性未在JSON中更新如何解决？

Fabric.js里用控制器缩放椭圆时，默认是靠修改scaleX和scaleY实现的，不会自动同步更新height、width、rx、ry这些基础尺寸属性，所以导出JSON时这些值还是初始状态。要解决这个问题，得在缩放完成后手动同步这些属性，同时重置缩放比例：

• 在object:modified事件里，先计算椭圆缩放后的实际尺寸
• 更新width、height、rx、ry为实际计算出的值
• 把scaleX和scaleY重置为1，避免后续操作出现缩放叠加的问题
• 最后调用setCoords()更新控件坐标，保证控制器位置正确

修改后的代码示例：

canvas.on('object:modified', modifiedHandler);

var modifiedHandler = function (evt) {
  var modifiedObject = evt.target;
  // 只处理椭圆对象
  if (modifiedObject.type !== 'ellipse') return;

  // 计算缩放后的实际尺寸
  var actualWidth = modifiedObject.width * modifiedObject.scaleX;
  var actualHeight = modifiedObject.height * modifiedObject.scaleY;

  // 更新基础尺寸属性
  modifiedObject.set({
    width: actualWidth,
    height: actualHeight,
    rx: actualWidth / 2,
    ry: actualHeight / 2,
    scaleX: 1,
    scaleY: 1
  });

  modifiedObject.setCoords();
  canvas.renderAll();

  console.log("object", JSON.stringify(canvas));
};

补充说明 #

• setCoords()只是更新对象的控制点和边界框坐标，不会修改尺寸属性，所以之前单独调用它没用
• 重置scaleX/scaleY为1是关键，不然后续再次缩放时会基于已缩放的比例继续计算，导致尺寸逻辑混乱

内容的提问来源于stack exchange，提问作者Rik Dessers