Шрифты и их параметры

В Two.js текстовые объекты создаются через класс Text, который позволяет выводить строки с указанием позиции, размера, шрифта и стиля. Основной синтаксис выглядит следующим образом:

let text = new Two.Text('Пример текста', x, y, {
  family: 'Arial',
  size: 48,
  leading: 50,
  alignment: 'center',
  weight: 700,
  style: 'italic'
});
two.add(text);
  • x и y — координаты начала текста на холсте.
  • family — название шрифта, поддерживаются системные и веб-шрифты.
  • size — размер шрифта в пикселях.
  • leading — межстрочный интервал (расстояние между базовыми линиями строк).
  • alignment — выравнивание текста: 'left', 'center', 'right'.
  • weight — толщина шрифта, принимает числовые значения (100–900) или ключевые слова ('normal', 'bold').
  • style — стиль текста: 'normal', 'italic', 'oblique'.

Настройка шрифта и стиля

Two.js позволяет задавать шрифты и их параметры через объект настроек, передаваемый при создании текста. Важные свойства:

  • family: основной шрифт. Для резервного использования можно указывать список через запятую: 'Arial, sans-serif'.
  • size: размер шрифта влияет на масштабирование текста и его визуальную читаемость.
  • leading: регулирует расстояние между строками, что важно при многострочном тексте.
  • weight и style: позволяют выделять текст жирным или курсивом.

Пример многострочного текста:

let multiLineText = new Two.Text('Первая строка\nВторая строка', 100, 100, {
  family: 'Verdana',
  size: 36,
  leading: 40,
  alignment: 'left'
});
two.add(multiLineText);

Цвет и прозрачность текста

Цвет текста задается через свойства fill и stroke:

text.fill = '#FF5733'; // основной цвет
text.stroke = '#000000'; // цвет контура
text.linewidth = 2;     // толщина контура
text.opacity = 0.8;     // прозрачность текста
  • fill отвечает за цвет заливки букв.
  • stroke задаёт контур.
  • linewidth регулирует ширину контура.
  • opacity изменяет прозрачность всего текстового объекта.

Трансформация и позиционирование

Текстовые объекты в Two.js можно перемещать, масштабировать и вращать с помощью стандартных методов translation, rotation и scale:

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

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

Two.js поддерживает анимацию текстовых объектов через цикл обновления two.update():

two.bind('update', function(frameCount) {
  text.rotation += 0.01;
  text.opacity = 0.5 + 0.5 * Math.sin(frameCount / 20);
}).play();
  • Изменение свойств rotation, translation, scale и opacity позволяет создавать плавные анимации.
  • Можно использовать frameCount для циклических эффектов.

Ограничения и особенности

  • Two.js рендерит текст через SVG или Canvas, что влияет на поддержку сложных шрифтов и кернинга.
  • Некоторые шрифты могут некорректно отображаться при использовании WebGL-рендера.
  • Для сложного форматирования рекомендуется использовать библиотеку Two.TextPath или создавать текст через векторные фигуры.

Резервные шрифты и совместимость

Для обеспечения кросс-браузерной совместимости:

let text = new Two.Text('Пример', 100, 100, {
  family: 'Helvetica, Arial, sans-serif',
  size: 36
});
  • Указываются несколько шрифтов через запятую.
  • Последний элемент (sans-serif, serif) — резервный шрифт, если предыдущие недоступны.

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

Two.js позволяет легко создавать многострочные блоки текста. Разделение строк происходит через символ \n. Для контроля интервала между строками используется leading:

let paragraph = new Two.Text(
  'Строка 1\nСтрока 2\nСтрока 3', 
  50, 50, 
  { size: 30, leading: 40, alignment: 'center' }
);
two.add(paragraph);
  • alignment влияет на выравнивание каждой строки внутри блока.
  • leading обеспечивает удобочитаемый межстрочный интервал.
Оглавление