Two.Text

Two.js предоставляет мощные средства для работы с графикой на HTML5 Canvas, SVG и WebGL. Для отображения текста используется объект Two.Text, который позволяет создавать, позиционировать и стилизовать текстовые элементы с высокой гибкостью.

Инициализация текста

Для начала необходимо создать экземпляр Two.Text:

const text = new Two.Text(
  'Пример текста', // Содержимое текста
  100,            // Координата X
  100,            // Координата Y
  {
    size: 36,        // Размер шрифта в пикселях
    family: 'Arial', // Шрифт
    weight: 700,     // Жирность шрифта
    style: 'italic', // Стиль: normal, italic, oblique
    alignment: 'center', // Выравнивание: left, center, right
    linewidth: 2,    // Толщина обводки
    fill: '#000000', // Цвет заливки текста
    stroke: '#ff0000' // Цвет обводки
  }
);

Ключевые свойства конструктора:

  • size – размер шрифта, числовое значение в пикселях.
  • family – название шрифта. Можно использовать стандартные шрифты или подключенные веб-шрифты.
  • weight – жирность текста, поддерживаются числовые значения (100–900) и ключевые слова (‘normal’, ‘bold’).
  • style – стиль шрифта: 'normal', 'italic', 'oblique'.
  • alignment – горизонтальное выравнивание текста относительно заданной позиции ('left', 'center', 'right').
  • linewidth – толщина контура текста.
  • fill – цвет заливки текста.
  • stroke – цвет контура текста.

Добавление текста на сцену

После создания объекта Two.Text, его необходимо добавить в сцену Two:

const two = new Two({ width: 800, height: 600 }).appendTo(document.body);
two.add(text);
two.update();

Метод two.add() помещает объект в сцену, а two.update() обеспечивает моментальное отображение изменений на холсте.

Манипуляции с текстом

Позиционирование текста:

text.translation.set(200, 150); // Перемещение текста на новые координаты

Масштабирование текста:

text.scale = 1.5; // Увеличение текста в 1.5 раза

Поворот текста:

text.rotation = Math.PI / 4; // Поворот на 45 градусов

Стилизация текста

Two.js позволяет динамически изменять свойства текста:

text.fill = '#3498db';      // Изменение цвета заливки
text.stroke = '#2c3e50';    // Изменение цвета обводки
text.size = 48;              // Изменение размера шрифта
text.family = 'Verdana';     // Смена шрифта
text.weight = 'bold';        // Изменение жирности
text.alignment = 'right';    // Выравнивание по правому краю

Можно комбинировать несколько стилей одновременно, что дает возможность создавать сложные текстовые эффекты.

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

Для создания анимаций применяется цикл рендеринга Two.bind(‘update’, callback) или метод two.update() в цикле:

two.bind('upd ate', function(frameCount) {
  text.rotation += 0.01; // Плавный поворот текста
  text.translation.x = 200 + 100 * Math.sin(frameCount * 0.05); // Колебание по X
}).play();

Использование bind(‘update’) позволяет синхронизировать изменения свойств текста с частотой кадров, создавая плавные анимации.

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

Two.js поддерживает многострочный текст через символы переноса \n:

const multiLineText = new Two.Text(
  'Первая строка\nВторая строка\nТретья строка',
  400, 300,
  { size: 30, alignment: 'center', fill: '#27ae60' }
);
two.add(multiLineText);
two.update();

Выравнивание и размер шрифта применяются ко всем строкам текста, обеспечивая консистентный вид.

Взаимодействие с другими объектами

Текстовые объекты можно сгруппировать с другими графическими элементами через Two.Group:

const circle = new Two.Circle(0, 0, 50);
circle.fill = '#e74c3c';

const group = two.makeGroup(circle, text);
group.translation.se t(400, 300);

Группировка позволяет применять трансформации ко всей группе элементов одновременно, сохраняя относительное позиционирование текста и других объектов.

Рендеринг на разных поверхностях

Two.js поддерживает рендеринг на Canvas, SVG и WebGL. Свойства текста работают одинаково на всех поверхностях, что упрощает переносимость кода между платформами. Для выбора рендерера достаточно указать параметр type при создании экземпляра Two:

const two = new Two({ width: 800, height: 600, type: Two.Types.svg }).appendTo(document.body);

Итоговые рекомендации по работе с Two.Text

  • Для четкого отображения текста рекомендуется явно задавать size, family и weight.
  • Для анимаций и интерактивных эффектов стоит использовать bind(‘update’).
  • Для сложных композиций удобно применять Two.Group, что позволяет объединять текст с другими объектами и применять общие трансформации.
  • Многострочный текст создается через символ переноса \n, а горизонтальное выравнивание регулируется через alignment.

Использование Two.Text открывает широкие возможности для создания динамических и стилизованных текстовых элементов в двухмерной графике с помощью JavaScript.

Оглавление