Создание текстовых объектов

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

Инициализация текстового объекта

Текстовый объект создается с помощью класса Two.Text. Основной синтаксис:

const text = new Two.Text(string, x, y, options);
  • string — строка текста, которую необходимо отобразить.
  • x и y — координаты центра текста в системе координат Two.js.
  • options — объект с настройками текста (необязательный).

Пример создания простого текста:

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

const helloText = new Two.Text('Привет, Two.js!', 400, 300, {
  size: 48,
  family: 'Arial',
  weight: 700,
  alignment: 'center',
  fill: '#ff0000'
});

two.add(helloText);
two.update();

В данном примере:

  • size — размер шрифта в пикселях.
  • family — семейство шрифта.
  • weight — толщина шрифта (число или строка, например, 'bold').
  • alignment — выравнивание текста ('left', 'center', 'right').
  • fill — цвет текста в формате CSS.

Основные свойства текстового объекта

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

  1. value — строковое содержимое текста.

    helloText.value = 'Новый текст';

  2. size — размер шрифта.

    helloText.size = 36;

  3. family — семейство шрифта.

  4. weight — толщина шрифта.

  5. style — стиль шрифта ('normal', 'italic', 'oblique').

  6. alignment — выравнивание по горизонтали.

  7. fill — цвет заливки текста.

  8. stroke и linewidth — цвет и ширина обводки текста.

Трансформации и анимация текста

Текстовые объекты полностью поддерживают трансформации Two.js: перемещение, масштабирование и вращение.

helloText.translation.set(200, 100);
helloText.rotation = Math.PI / 4;
helloText.scale = 1.5;
two.update();
  • translation — вектор смещения.
  • rotation — угол поворота в радианах.
  • scale — коэффициент масштабирования.

Анимация текста осуществляется через встроенный метод two.bind('upd ate', callback):

two.bind('update', function(frameCount) {
  helloText.rotation += 0.01;
  helloText.scale = 1 + 0.5 * Math.sin(frameCount * 0.05);
}).play();

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

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

const lines = ['Строка 1', 'Строка 2', 'Строка 3'];
lines.forEach((line, index) => {
  const textLine = new Two.Text(line, 400, 200 + index * 50, { size: 32, alignment: 'center' });
  two.add(textLine);
});
two.update();

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

Стиль и визуальные эффекты

Two.js позволяет комбинировать текст с градиентами и эффектами прозрачности через свойства fill, stroke, opacity:

const gradientText = new Two.Text('Градиентный текст', 400, 300, {
  size: 60,
  fill: '#00f',
  stroke: '#0ff',
  linewidth: 2,
  opacity: 0.8
});
two.add(gradientText);
two.update();

Также текст можно группировать с другими объектами в Two.Group для применения единой анимации или трансформации.

Интеграция с фигурами и кривыми

Текст можно комбинировать с примитивами, создавая сложные графические композиции:

const circle = two.makeCircle(400, 300, 100);
circle.fill = '#ccc';
circle.noStroke();

const label = new Two.Text('Центр круга', 400, 300, { size: 24 });
two.add(circle, label);
two.update();

Группировка позволяет управлять объектами как единым целым:

const group = two.makeGroup(circle, label);
group.translation.se t(100, 50);
two.update();

Советы по производительности

  • Избегать частого создания новых текстовых объектов при анимации; лучше обновлять существующие через value.
  • Использовать opacity и fill вместо удаления и пересоздания объектов для динамических изменений.
  • Для большого количества текста оптимально использовать Canvas или WebGL рендеринг, так как SVG может быть медленным при сотнях объектов.

Расширенные возможности

  • Масштабирование и резкость: Two.js автоматически масштабирует текст без потери качества в SVG.
  • Анимация свойств: любые свойства текста (size, fill, rotation) можно анимировать через two.bind('update').
  • Композиция с Path и Curve: текст можно располагать вдоль кривых, вычисляя позиции вручную и создавая индивидуальные объекты для каждой буквы.

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

Оглавление