关于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.I.e。与fabric.Text的charSpacing = 500看起来或多或少与letter-spacing: .5em;的文本相同。

---

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<div class="row">
  <div class="col">
    <canvas id="c" width="80" height="100"></canvas>
    <span class="text text2">text</span>
  </div>
  <div class="col text text1">
    <span>text</span>
    <span>text</span>
  </div>
</div>