Question

我想弄清楚fabric.js中lineHeight和charSpacing属性的单位是什么以及如何计算。

在文档中我找不到答案，或者我不明白它的确切工作方式。

lineHeight : http://fabricjs.com/docs/fabric.Text.html#lineHeight
charSpacing: http://fabricjs.com/docs/fabric.Text.html#charSpacing

Answer 1

Fabric的 lineHeight 对应于CSS line-height的无单位值，这意味着它是文本字体大小的倍数。实际的公式fabric.js用于计算线的高度（在text.getHeightOfLine()方法中）是

maxHeight * this.lineHeight * this._fontSizeMult

其中：

maxHeight是给定行中最大字符的字体大小；

_fontSizeMult是与字体大小（以像素为单位）的恒定文本行比例，默认情况下等于1.13。 Fabric.js使用_fontSizeMult乘数为下划线和上划线留出一些额外的空间。因此，您可能需要将text.lineHeight除以fabric.Text.prototype._fontSizeMult才能使该值在fabric.js和CSS之间保持一致。

Fabric的 charSpacing 对应于CSS letter-spacing的{{1}}单位除以1000。带有em的{{1}}与带有fabric.Text的文本大致相同。

这里是fabric.js文本（黑色）和HTML文本（红色）的比较：

charSpacing = 500

letter-spacing: .5em;

const canvas = new fabric.StaticCanvas('c')

canvas.add(new fabric.Text('text\ntext', {
  fontSize: 20,
  left: 0,
  top: 8,
  lineHeight: 2 / fabric.Text.prototype._fontSizeMult
}))

canvas.add(new fabric.Text('text', {
  fontSize: 20,
  left: 0,
  top: 80,
  charSpacing: 500
}))

关于fabric.js中的单元的困惑

1 个答案: