如何获取textarea手动/自动换行的每行内容数组并同步至fabricjs文本框

核心思路是不要手动计算换行位置，直接利用浏览器原生的文本测量能力拿到准确的视觉行拆分结果，再同步给fabricjs的Textbox对象，完全规避手动计算宽度、字体度量带来的误差。

第一步：准确获取textarea的视觉换行内容数组 #

创建和textarea排版样式完全一致的隐藏镜像测量节点，逐字校验宽度判断换行点，同时兼容手动回车换行和宽度溢出自动折行：

// 初始化一次镜像测量节点即可，不用每次内容变化都重建
const mirror = document.createElement('div');
const textarea = document.querySelector('.text');
// 同步所有影响文本排版的CSS属性到镜像节点
const copyStyleList = [
  'boxSizing', 'width', 'padding', 'border', 'fontSize',
  'fontFamily', 'fontWeight', 'fontStyle', 'letterSpacing',
  'textTransform', 'textIndent', 'wordSpacing', 'lineHeight',
  'whiteSpace', 'wordBreak', 'overflowWrap'
];
const textareaStyles = window.getComputedStyle(textarea);
copyStyleList.forEach(styleKey => {
  mirror.style[styleKey] = textareaStyles[styleKey];
});
// 设置镜像节点脱离文档流，不影响页面正常显示
mirror.style.position = 'absolute';
mirror.style.top = '-9999px';
mirror.style.left = '-9999px';
mirror.style.visibility = 'hidden';
mirror.style.whiteSpace = 'nowrap';
document.body.appendChild(mirror);

function getVisualLines(content) {
  const lineResult = [];
  // 先拆分用户手动输入的硬换行
  const hardBreakLines = content.split('\n');
  const maxContentWidth = textarea.clientWidth;

  hardBreakLines.forEach(hardLine => {
    if (!hardLine) {
      lineResult.push('');
      return;
    }
    let currentLineText = '';
    // 逐字累加测量宽度，判断折行点
    for (let i = 0; i < hardLine.length; i++) {
      const currentChar = hardLine[i];
      const testText = currentLineText + currentChar;
      mirror.textContent = testText;
      if (mirror.offsetWidth > maxContentWidth) {
        lineResult.push(currentLineText);
        currentLineText = currentChar;
      } else {
        currentLineText = testText;
      }
    }
    if (currentLineText) lineResult.push(currentLineText);
  });
  return lineResult;
}

注意：只要镜像节点和textarea的排版样式完全同步，不管是连续空格、长单词断行、特殊字符的折行效果，测量结果都会和textarea实际显示100%一致，不会出现偏差。

第二步：同步内容到fabricjs Textbox，保证排版完全一致 #

拿到视觉行数组之后，不要直接传整段文本让fabric自己计算换行——fabric的字体度量逻辑和浏览器存在微小差异，很容易出现换行点错位。直接把视觉行用硬换行符\n拼接后赋值，同时关闭fabric自身的自动换行逻辑即可：

// 初始化fabric画布和文本对象，样式和textarea完全对齐
const canvas = new fabric.Canvas('targetCanvas');
const fabricTextObj = new fabric.Textbox('', {
  left: 0,
  top: 0,
  fontSize: parseFloat(textareaStyles.fontSize),
  lineHeight: parseFloat(textareaStyles.lineHeight),
  textAlign: textareaStyles.textAlign,
  width: textarea.clientWidth,
  splitByGrapheme: true,
  editable: false
});
canvas.add(fabricTextObj);

// 监听textarea内容变化实时同步
textarea.addEventListener('input', () => {
  const visualLineList = getVisualLines(textarea.value);
  // 用硬换行拼接所有视觉行，强制fabric按浏览器计算的折行点渲染
  fabricTextObj.set('text', visualLineList.join('\n'));
  // 关闭fabric自动换行，避免二次计算导致排版偏移
  fabricTextObj.set('noWrap', true);
  canvas.requestRenderAll();
});

边界情况处理 #

• 页面resize、textarea尺寸变化时，重新触发一次input同步事件即可，换行位置会自动适配新宽度。
• 粘贴带格式内容时，先提取textarea纯文本再做测量，避免富文本格式干扰样式计算。
• 如果页面用了自定义字体，等字体加载完成后再初始化测量逻辑，可以用document.fonts.ready监听字体加载状态，避免字宽计算错误导致折行点偏差。

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