Путаница с единицами в fabric.js - PullRequest
Новая
       6

Путаница с единицами в fabric.js

0 голосов
/ 17 февраля 2019

Я бы хотел выяснить, каковы единицы свойств lineHeight и charSpacing в fabric.js и как они рассчитываются.

В документации я не смог найти свой ответ иливозможно я не понимаю, как это точно работает.

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

1 Ответ

0 голосов
/ 17 февраля 2019

Fabric lineHeight соответствует безразмерному значению CSS line-height, что означает множитель размера шрифта текста.Фактическая формула fabric.js, используемая для расчета высоты строки (в методе text.getHeightOfLine()), равна 

maxHeight * this.lineHeight * this._fontSizeMult

, где:

maxHeight - размер шрифта самого большого символа в даннойline;

_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>
...