Декорирование текста

В Two.js текст создаётся с использованием объекта Two.Text, который наследует свойства базового объекта Two.Shape. Основные параметры конструктора:

const text = new Two.Text('Пример текста', x, y, {
  size: 48,
  family: 'Arial',
  weight: 'bold',
  alignment: 'center',
  baseline: 'middle'
});
  • ‘Пример текста’ — строка текста.
  • x, y — координаты центра текста на холсте.
  • size — размер шрифта в пикселях.
  • family — семейство шрифтов.
  • weight — начертание текста (например, ‘bold’, ‘normal’).
  • alignment — горизонтальное выравнивание (‘left’, ‘center’, ‘right’).
  • baseline — вертикальное выравнивание (‘top’, ‘middle’, ‘bottom’).

Объект текста добавляется в сцену через метод two.add(text), после чего отображается на холсте вызовом two.update().

Настройка стиля текста

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

text.fill = '#FF5733';        // Цвет заливки текста
text.stroke = '#000000';      // Цвет контура
text.linewidth = 2;           // Толщина контура
text.opacity = 0.85;          // Прозрачность
text.visible = true;          // Видимость объекта
  • fill задаёт основной цвет текста.
  • stroke и linewidth позволяют создавать эффект обводки.
  • opacity полезна для плавных анимаций появления и исчезновения.

В отличие от HTML, в Two.js текст является векторным объектом, что обеспечивает чёткое масштабирование без потери качества.

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

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

text.translation.set(200, 150); // Перемещение
text.rotation = Math.PI / 4;    // Вращение на 45 градусов
text.scale = 1.5;               // Масштабирование
  • translation — вектор смещения объекта.
  • rotation — угол поворота в радианах.
  • scale — коэффициент масштабирования (1 — исходный размер).

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

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

Two.js предоставляет встроенный цикл обновления для анимации:

two.bind('update', function(frameCount) {
  text.rotation += 0.01;         // Плавное вращение текста
  text.opacity = Math.abs(Math.sin(frameCount * 0.01)); // Пульсация прозрачности
}).play();
  • bind(‘update’, callback) — связывает функцию с циклом обновления сцены.
  • frameCount — текущий номер кадра, используется для создания циклических анимаций.
  • Любые свойства текста можно менять в реальном времени: положение, размер, цвет, прозрачность.

Стилизация текста с градиентами и паттернами

Для создания более сложного декоративного текста используется CanvasPattern или градиенты, передаваемые через fill:

const ctx = two.renderer.ctx;
const gradient = ctx.createLinearGradient(0, 0, 0, 50);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#0000FF');

text.fill = gradient;
  • createLinearGradient(x0, y0, x1, y1) создаёт линейный градиент.
  • addColorStop(position, color) определяет цвет в точке от 0 до 1.
  • Такой подход позволяет делать текст с плавными переходами цвета и сложными декоративными эффектами.

Тени и свечение

Two.js поддерживает визуальные эффекты через свойства shadowColor, shadowOffsetX, shadowOffsetY и shadowBlur:

text.shadowColor = 'rgba(0,0,0,0.5)';
text.shadowOffsetX = 4;
text.shadowOffsetY = 4;
text.shadowBlur = 10;
  • shadowColor задаёт цвет тени с прозрачностью.
  • shadowOffsetX/Y — смещение тени по осям.
  • shadowBlur — радиус размытия, создающий эффект мягкого свечения.

Комбинирование текста с фигурами

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

const circle = two.makeCircle(text.translation.x, text.translation.y, 60);
circle.fill = 'rgba(255,255,0,0.3)';
circle.stroke = '#FFAA00';
circle.linewidth = 3;

two.add(text, circle);
  • Используется makeCircle, makeRectangle и другие примитивы.
  • Группировка объектов через Two.Group позволяет применять трансформации к набору объектов одновременно:
const group = two.makeGroup(text, circle);
group.rotation = Math.PI / 6;
  • Two.Group наследует свойства трансформаций, что удобно для сложного декорирования текста.

Интерактивность текста

Текст можно сделать интерактивным через обработку событий мыши или касаний. Для этого отслеживаются координаты курсора и проверяется попадание в область текста:

canvas.addEventListener('mousemove', function(e) {
  const dx = e.offsetX - text.translation.x;
  const dy = e.offsetY - text.translation.y;
  if (Math.sqrt(dx*dx + dy*dy) < 50) {
    text.fill = '#00FF00'; // изменение цвета при наведении
  } else {
    text.fill = '#FF5733';
  }
});
  • Координаты текста задаются через translation, поэтому проверка попадания должна учитывать центр текста и его размеры.
  • Такой подход позволяет создавать эффекты наведения, клика и интерактивной анимации текста.

Практические советы по декорированию текста

  • Использовать векторные шрифты для масштабируемости.
  • Комбинировать fill и stroke для объёмного эффекта.
  • Группировать объекты через Two.Group для удобного управления.
  • Применять bind('update', callback) для анимации свойств.
  • Использовать градиенты и тени для создания глубины.
  • Для интерактивности отслеживать координаты мыши и трансформации объектов.

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

Оглавление