FabricJS iText样式数组行高失效问题求助

嘿，我之前也踩过FabricJS IText行高的坑！你遇到的问题核心在于对lineHeight属性的定位错误——它不属于字符级样式，而是行/段落级别的配置，放在字符样式数组里自然会被框架忽略，这就是为什么字号生效但行高没反应的原因。

关键知识点纠正 #

FabricJS的IText把样式分成两类：

• 字符级样式：比如fontSize、fill、fontWeight、textDecoration这些，针对单个字符，放在styles数组里生效。
• 行/段落级样式：比如lineHeight、textAlign、indentation这些，控制整行的布局，必须放在IText的全局属性或者paragraphs配置数组中。

另外要注意：lineHeight是相对值（默认值为1），它的实际行高是 fontSize * lineHeight。你想要行高为5，当字号是10时，设置lineHeight: 0.5就可以达到效果（10*0.5=5），而不是直接写5。

具体解决方案代码 #

如果要给不同行设置不同的行高，需要用paragraphs数组来配置每一行的段落属性：

// 创建IText实例，单独配置第一行的行高
const canvas = new fabric.Canvas('your-canvas-id');

const customText = new fabric.IText('Test Line 1\nTest Line 2', {
  left: 50,
  top: 50,
  // 字符样式数组：只设置字号等字符属性
  styles: {
    0: Array.from({length: 'Test Line 1'.length}, () => ({fontSize: 10})),
    1: Array.from({length: 'Test Line 2'.length}, () => ({fontSize: 10}))
  },
  // 段落配置数组：对应每一行的行高设置
  paragraphs: [
    { lineHeight: 0.5 }, // 第一行行高 = 10 * 0.5 = 5
    { lineHeight: 1 }    // 第二行用默认行高（等于字号10）
  ]
});

canvas.add(customText);

如果所有行的行高都一样，直接设置IText的全局lineHeight属性即可，不用写paragraphs数组：

const customText = new fabric.IText('Test Line 1\nTest Line 2', {
  left: 50,
  top: 50,
  lineHeight: 0.5, // 所有行的行高都是5
  styles: { /* 字符样式配置 */ }
});

为什么之前的写法无效？ #

你把lineHeight放进字符样式数组里，FabricJS在解析时会自动忽略这个不属于字符级的属性，只有字符专属的样式才会被应用，这就是行高完全没生效的原因。

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