Межстрочный интервал

В библиотеке Two.js работа с текстом осуществляется через объект Two.Text, который позволяет создавать и управлять текстовыми элементами с использованием векторной графики. Одним из важных аспектов форматирования текста является межстрочный интервал (line height), определяющий расстояние между базовыми линиями последовательных строк.

Свойство leading

Для изменения межстрочного интервала используется свойство leading объекта Two.Text. Оно задаёт вертикальное расстояние между строками относительно базовой линии текста.

let two = new Two({ width: 800, height: 600 }).appendTo(document.body);

let text = new Two.Text(
  'Первая строка\nВторая строка\nТретья строка',
  400, 300,
  {
    size: 48,
    family: 'Arial',
    leading: 60,
    alignment: 'center'
  }
);

two.add(text);
two.update();

Пояснения к коду:

  • size — размер шрифта в пикселях.
  • family — шрифтовое семейство.
  • leading — межстрочный интервал, в пикселях. Значение больше size увеличивает расстояние между строками, меньше — уменьшает.
  • alignment — выравнивание текста (left, center, right).

Единицы измерения и расчёт

В Two.js leading задаётся в абсолютных пикселях, а не в относительных единицах к размеру шрифта. Для динамических интерфейсов часто используют формулу:

text.leading = text.size * 1.2;

где 1.2 — коэффициент, задающий комфортное расстояние между строками (аналог CSS line-height: 1.2).

Динамическое изменение межстрочного интервала

Обновление leading можно выполнять после создания текста:

text.leading = 80;
two.update();

После изменения свойства обязательно вызывается two.update(), чтобы перерисовать сцену с новым интервалом.

Многострочный текст и переносы

Two.js поддерживает символы переноса \n. Каждая новая строка учитывает текущее значение leading. Например:

let multiLine = new Two.Text(
  'Строка 1\nСтрока 2\nСтрока 3\nСтрока 4',
  200, 100,
  {
    size: 36,
    leading: 50
  }
);

Если требуется текст без ручных переносов, строки можно разделять программно, разбивая длинную строку на массив с помощью split('\n') и объединяя через join('\n').

Влияние на вертикальное выравнивание

При использовании центрального выравнивания (alignment: 'center') межстрочный интервал напрямую влияет на позицию текста относительно его центра. Например, увеличение leading смещает весь блок текста вверх или вниз, если исходная координата задаёт центр. Для точного позиционирования блока с учётом интервала рекомендуется использовать формулы:

let centerY = 300;
text.translation.y = centerY - (text.value.split('\n').length - 1) * text.leading / 2;

Это гарантирует, что блок текста остаётся визуально центрированным.

Свойство baseline

Базовая линия текста (baseline) в Two.js может быть top, middle или bottom. В сочетании с leading оно определяет, как строки распределяются относительно исходной координаты. Например:

let text = new Two.Text('Пример текста', 400, 300, {
  size: 48,
  leading: 70,
  baseline: 'top'
});
  • top — верх текста совпадает с координатой.
  • middle — центр текста совпадает с координатой.
  • bottom — нижняя линия текста совпадает с координатой.

Выбор базовой линии помогает точно управлять вертикальной компоновкой многострочного текста.

Интерактивная регулировка

Для интерфейсов с ползунками или настройками параметров текста можно динамически менять leading через события:

slider.addEventListener('input', (e) => {
  text.leading = parseFloat(e.target.value);
  two.update();
});

Такой подход позволяет визуально оценивать оптимальный межстрочный интервал для конкретного шрифта и размера.

Заключение по техническим особенностям

  • leading задаёт точное расстояние между строками в пикселях.
  • Использование baseline и alignment позволяет корректно позиционировать текстовые блоки.
  • Динамическое изменение интервала требует вызова two.update().
  • Комбинация с программным разбиением строк обеспечивает гибкость при работе с длинным текстом.

Эти методы дают полный контроль над межстрочным интервалом в Two.js, обеспечивая точное и визуально аккуратное форматирование многострочного текста.

Оглавление