如何在FabricJS Textbox中实现程序化文本的字号自适应？

我用FabricJS的Textbox组件做用户文本编辑，它在编辑时的文本换行、随框宽调整自动换行/取消换行的表现很好。但有个需求：画布加载时（或加载前的JSON中）程序化替换Textbox文本时，不希望文本换行或框宽扩展，而是通过缩小fontSize让文本单行适配框宽，且只执行这一次。

我之前用IText通过下面的代码实现，但这套逻辑没法可靠适配Textbox；而且用IText会丢失Textbox优秀的换行功能，所以想找仅用Textbox的解决方案：

const handleTextChanged = ({ target }: { target: fabric.Object }) => {
  const { fixedWidth, width, fontSize } = target

  if (width > fixedWidth) {
    // Shrink the font size to stay within the max width
    target.fontSize = Math.round((fontSize * fixedWidth) / (width + 1))
  }

  target.width = fixedWidth
}

解决方案：仅用Textbox实现需求 #

核心思路是加载文本时临时禁用自动换行，计算单行宽度后缩放字号，完成后恢复自动换行功能，完全保留Textbox的原生编辑体验：

• 临时禁用自动换行：加载文本前将textWrapping设为'none'，强制文本以单行显示，保证宽度计算的准确性。
• 计算缩放比例：获取单行文本的实际宽度，对比固定框宽，按比例缩小字号，直到文本宽度适配框宽。
• 恢复自动换行：字号调整完成后，把textWrapping改回'normal'，用户编辑时即可正常使用自动换行。

代码实现 #

// 适配文本到固定宽度的函数，仅在加载时执行
function fitTextToFixedWidth(textbox, fixedWidth) {
  // 保存原自动换行设置
  const originalWrapping = textbox.textWrapping;
  // 临时禁用自动换行，强制单行
  textbox.textWrapping = 'none';
  // 触发文本重绘计算宽度
  textbox.set('text', textbox.text);
  textbox.render();

  // 获取当前单行文本的缩放后宽度
  const currentWidth = textbox.getScaledWidth();
  if (currentWidth > fixedWidth) {
    // 计算缩放比例，调整字号
    const scaleRatio = fixedWidth / currentWidth;
    textbox.fontSize = Math.round(textbox.fontSize * scaleRatio);
    // 再次更新文本确保宽度适配
    textbox.set('text', textbox.text);
    textbox.render();
  }

  // 恢复原自动换行设置
  textbox.textWrapping = originalWrapping;
  // 更新画布
  textbox.canvas.renderAll();
}

// 调用示例：画布加载完成后执行
const targetFixedWidth = 300; // 你的文本框固定宽度
// 假设yourTextboxInstance是已初始化的Textbox实例
fitTextToFixedWidth(yourTextboxInstance, targetFixedWidth);

补充说明 #

• 务必在画布加载完成后调用该函数，确保Textbox已挂载到画布，getScaledWidth()能正确获取宽度。
• 如果从JSON加载Textbox，可在canvas.loadFromJSON()的回调中执行适配逻辑，保证实例初始化完成。
• 该逻辑仅在加载时执行一次，用户后续编辑时，Textbox的自动换行、随框宽调整换行的功能完全保留。

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