Fabric.js技术问询：如何修改文本添加函数实现每行生成独立对象

要实现这个需求，我们只需要对原函数做几个关键修改：先把输入字符串按换行符分割成数组，然后遍历每个元素创建独立的文本对象，同时处理行与行之间的位置偏移，避免所有文本堆在一起。

下面是修改后的完整函数：

self.addText = function(str) {
  // 处理默认值，空字符串也替换为默认文本
  str = str || 'Votre Texte...';
  // 按换行符分割字符串，兼容Windows(\r\n)和Unix(\n)的换行格式
  const lines = str.split(/\r?\n/);
  
  // 遍历每一行文本
  lines.forEach((lineText, index) => {
    // 可选：跳过空行，如果需要保留空行对应的文本对象可以删除这行
    if (!lineText.trim()) return;
    
    var object = new FabricWindow.Text(lineText, self.textDefaults);
    object.id = self.createId();
    
    // 设置垂直偏移避免文本重叠，这里用字体大小的1.2倍作为行高
    // 你可以根据实际文本样式调整这个行高系数
    const lineHeight = object.fontSize * 1.2;
    object.top = (self.textDefaults.top || 0) + (index * lineHeight);
    
    self.addObjectToCanvas(object);
  });
};

关键修改点说明： #

• 换行兼容分割：用正则/\r?\n/拆分字符串，同时适配Windows和类Unix系统的换行格式，确保所有场景下的换行都能被正确识别。
• 空行可选过滤：添加了空行判断逻辑，避免创建无意义的空文本对象，若业务需要保留空行，直接删除该行判断即可。
• 垂直位置偏移：通过index * lineHeight计算每行的垂直位置，让文本对象按顺序排列不重叠。行高基于字体大小的1.2倍计算，你可以根据自定义的文本行高设置调整这个系数，或者直接使用固定数值。
• 独立对象创建：遍历分割后的每一行文本，为每行创建单独的FabricWindow.Text对象，分配唯一ID后添加到画布。

如果你的画布文本初始位置（self.textDefaults.top）已有设置，偏移量会基于初始位置叠加，保证整体排版逻辑一致。

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