Выравнивание текста

Two.js предоставляет объект Two.Text, позволяющий создавать и отображать текстовые элементы на канве. Для управления положением текста используется сочетание свойств объекта, в частности translation, alignment, baseline и масштабирование через scale.

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

let text = new Two.Text('Пример текста', 0, 0, {
  size: 48,
  family: 'Arial',
  leading: 1.2,
  alignment: 'center'
});

two.add(text);
two.update();
  • size — размер шрифта в пикселях.
  • family — шрифт текста.
  • leading — межстрочный интервал.
  • alignment — горизонтальное выравнивание текста (left, center, right).

Горизонтальное выравнивание

Свойство alignment определяет, как текст будет выравниваться относительно своей позиции (translation).

  • left — начало текста совпадает с координатой X объекта.
  • center — текст центрируется по координате X.
  • right — конец текста совпадает с координатой X.
text.alignment = 'right';
text.translation.set(400, 100);
two.update();

В этом примере текст будет выравнен по правому краю относительно X=400.

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

Two.js использует свойство baseline для вертикального выравнивания текста:

  • top — верхняя граница текста совпадает с координатой Y.
  • middle — центр текста по вертикали совпадает с координатой Y.
  • bottom — нижняя граница текста совпадает с координатой Y.
  • alphabetic — базовая линия текста совпадает с координатой Y (по умолчанию).
text.baseline = 'middle';
text.translation.set(400, 300);
two.update();

Работа с многострочным текстом

Для многострочного текста используется символ переноса \n. Свойство leading позволяет контролировать расстояние между строками:

let multiline = new Two.Text('Первая строка\nВторая строка\nТретья строка', 400, 300, {
  size: 36,
  family: 'Verdana',
  alignment: 'center',
  baseline: 'middle',
  leading: 1.5
});

two.add(multiline);
two.update();

Каждая строка будет выравнена согласно параметрам alignment и baseline, а межстрочный интервал определяется leading.

Применение трансформаций

Трансформации rotation, scale и translation позволяют гибко позиционировать текст:

text.rotation = Math.PI / 6; // поворот на 30 градусов
text.scale = 1.5; // увеличение размера текста
text.translation.set(200, 150); // смещение позиции
two.update();
  • rotation — угол в радианах относительно центра текста.
  • scale — масштаб по обеим осям.
  • translation — положение текста на канве.

Анимация текста

Two.js интегрируется с анимацией через Two.makeRectangle, Two.makeText и собственные методы обновления. Для анимации выравнивания можно изменять translation или alignment динамически в цикле:

let x = 0;

two.bind('upd ate', function(frameCount) {
  text.translation.x = 200 + 100 * Math.sin(frameCount * 0.05);
}).play();

Это создаёт плавное горизонтальное движение текста с сохранением текущего выравнивания.

Выравнивание при масштабировании и вращении

Важно учитывать, что изменение scale и rotation влияет на визуальное положение текста относительно точки translation. Для сохранения точного выравнивания необходимо корректировать translation после применения трансформации:

text.scale = 2;
text.translation.se t(400 - text.width, 300);
two.update();

Здесь text.width используется для корректного позиционирования при правом выравнивании.

Практические советы

  • Использовать alignment совместно с baseline для точного позиционирования текста.
  • Для многострочного текста комбинировать leading с alignment, чтобы сохранить читаемость.
  • При сложных трансформациях всегда проверять визуальное положение текста, так как центр вращения — это центр объекта по умолчанию.
  • Для динамически изменяемого текста пересчитывать ширину и высоту после обновления строки, чтобы корректно поддерживать выравнивание.
Оглавление