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

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的em单位除以1000。即，fabric.Textwith的charSpacing = 500外观与with的文本大致相同letter-spacing: .5em;。

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

maxHeight * this.lineHeight * this._fontSizeMult

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
}))

.row {
  display: flex;
  flex-direction: row;
}

.col {
  display: flex;
  flex-direction: column;
}

.text {
  font-size: 20px;
  color: red;
}

.text1 {
  line-height: 2;
}

.text2 {
  letter-spacing: .5em;
}