canvas - Fabric.js 中单位的混淆

Question

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

在文档中我找不到答案，或者我可能不明白它到底是如何工作的。

行高: http://fabricjs.com/docs/fabric.Text.html#lineHeight
字符间距: 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.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>