Fabric.js缩放矩形时如何让TextBox自动匹配对应矩形的尺寸？

问题根源 #

Fabric.js的对象缩放逻辑为：缩放操作不会直接修改对象的width/height属性，仅通过scaleX/scaleY两个缩放系数控制显示尺寸，你读取translateX/translateY无法拿到正确的缩放后尺寸。

修改方案 #

替换你代码中的calculateTextboxWidth方法为以下实现即可：

calculateTextboxWidth: function (rect) {
  // 计算矩形缩放后的实际显示宽高
  const actualWidth = rect.width * rect.scaleX;
  const actualHeight = rect.height * rect.scaleY;

  // 更新文本框尺寸，如需保留固定内边距可对应调整宽高数值
  this.text.set({
    width: actualWidth,
    height: actualHeight
  });

  // 重置矩形缩放系数，更新原始宽高为当前实际尺寸，避免后续缩放比例错乱
  rect.set({
    width: actualWidth,
    height: actualHeight,
    scaleX: 1,
    scaleY: 1
  });

  this.canvas.renderAll();
}

补充说明 #

如果初始化时你设置了文本和矩形的偏移量，只需在设置文本宽高时扣除对应偏移值即可，比如左右各保留textOffsetLeft的边距：

width: actualWidth - 2 * this.textOffsetLeft,
height: actualHeight - 2 * this.textOffsetTop

修改完成后缩放矩形时，文本框会自动同步尺寸完全适配矩形大小，原有移动、旋转、双击编辑文本的逻辑不受影响。

内容的提问来源于stack exchange，提问作者Vishnu Sri Ranjan