Fabric.js 文本框 lineHeight 属性

在使用 Fabric.js 进行 canvas 开发时，我们通常需要使用文本框展示大段文字，而文本框的样式则需要通过设置属性来实现。其中，lineHeight 属性可以用于设置文本框中每一行文字之间的间距。

如何设置线条间距？

使用 Fabric.js 创建文本框对象时，可以通过设置 lineHeight 属性来设置行间距。下面是一个示例代码：

var canvas = new fabric.Canvas('canvas');

var text = new fabric.Textbox('Hello World!', {
  left: 50,
  top: 50,
  width: 200,
  lineHeight: 1.5   // 设置行间距
});

canvas.add(text);

在这个代码示例中，我们创建了一个文本框对象，将其位置设置在 (50, 50) 的位置，并设置了宽度为 200，行高为 1.5。这样就可以让每一行文字之间保持一定的间距，从而提高文本框的可读性。

lineHeight 属性的取值

lineHeight 属性的取值可以是字符串或数字类型。

如果取值为数字类型，则表示每一行文字的高度，以字体大小为单位。

如果取值为字符串类型，则可以是带单位的字符串（例如 "20px"）或不带单位的字符串（例如 "1.5"）。这时候，如果不带单位，则默认使用字体大小为单位。当然，您也可以使用百分数或 em 等其它单位。

总结

lineHeight 属性是一个非常实用的属性，可以在文本框展示大段文字时提高可读性，可以为您的应用程序打造更好的用户体验。同时，根据需要，您也可以通过改变行高来调整文本框的样式。