Директивы для Two.js

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

Создание и настройка экземпляра Two

Любая работа с Two.js начинается с создания объекта Two, который управляет сценой и рендерером:

const params = {
  width: 800,
  height: 600,
  type: Two.Types.svg // Можно использовать svg, canvas или webgl
};

const two = new Two(params).appendTo(document.body);
  • width и height задают размеры холста.
  • type определяет рендерер: Canvas для производительности, SVG для масштабируемой графики, WebGL для аппаратного ускорения.

После создания экземпляра two можно добавлять объекты и применять к ним директивы.

Добавление примитивов

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

// Создание круга
const circle = two.makeCircle(200, 200, 50);

// Настройка стиля через директивы
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 5;

// Добавление прямоугольника
const rect = two.makeRectangle(400, 200, 120, 80);
rect.fill = '#0080FF';
rect.stroke = '#FFFFFF';
rect.linewidth = 3;

Ключевые директивы примитивов:

  • fill — заливка объекта.
  • stroke — цвет контура.
  • linewidth — толщина линии.
  • opacity — прозрачность объекта (0–1).
  • visible — видимость объекта.

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

Two.js использует директивы для управления положением, масштабом и вращением объектов.

circle.translation.set(300, 300); // перемещение
circle.rotation = Math.PI / 4;   // вращение на 45 градусов
circle.scale = 1.5;              // масштаб
  • translation — перемещение объекта по координатам x и y.
  • rotation — угол поворота в радианах.
  • scale — масштаб объекта, можно задавать отдельно по x и y.

Трансформации применяются относительно центра объекта, что упрощает анимацию и взаимодействие.

Группировка объектов

Директива Group позволяет объединять несколько объектов и применять к ним общие трансформации.

const group = two.makeGroup(circle, rect);
group.translation.set(100, 50);
group.rotation = Math.PI / 6;

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

Анимация через директивы

Two.js использует встроенный механизм two.update() и метод bind('update', callback) для анимации объектов.

two.bind('update', function(frameCount) {
  circle.rotation += 0.01; // вращение в каждом кадре
  rect.translation.x += 1; // движение прямоугольника
});

two.play(); // запуск анимации
  • frameCount — текущий номер кадра.
  • Изменение свойств объектов в update позволяет создавать плавные и непрерывные анимации.

Для циклических анимаций можно использовать директивы sin и cos:

circle.translation.y = 200 + Math.sin(frameCount * 0.05) * 50;

Управление слоями

Директива add или addTo позволяет управлять порядком отображения объектов:

two.add(circle);      // добавление объекта на холст
rect.addTo(group);    // добавление в группу

Слои определяют порядок рендеринга: объекты, добавленные позже, перекрывают объекты, добавленные ранее.

Работа с цветами и градиентами

Two.js поддерживает директивы для цветовых градиентов:

const gradient = two.makeLinearGradient(0, 0, 0, 100, new Two.Stop(0, '#FF0000'), new Two.Stop(1, '#0000FF'));
rect.fill = gradient;
  • Two.Stop задает точку градиента и цвет.
  • Линейные и радиальные градиенты применяются к примитивам через директиву fill.

События и интерактивность

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

rect._renderer.elem.addEventListener('click', function() {
  rect.fill = '#00FF00';
});
  • _renderer.elem — доступ к DOM-элементу, соответствующему объекту.
  • Через событие можно менять свойства объекта динамически, создавая интерактивные сцены.

Применение директив для сложных фигур

Two.js позволяет создавать полилинии, кривые Безье и сложные пути с помощью директив vertices и curve:

const shape = two.makePath(100, 100, 150, 50, 200, 150, true);
shape.fill = '#FFFF00';
shape.stroke = '#FF00FF';
shape.linewidth = 4;
  • vertices задают точки контура.
  • Последний аргумент (true) определяет, замкнут ли путь.
  • Свойство curve позволяет сглаживать линии с помощью кривых Безье.

Итоговая структура директив

Основные категории директив в Two.js:

  1. Стилизация: fill, stroke, linewidth, opacity, visible.
  2. Трансформации: translation, rotation, scale.
  3. Группировка и слои: Group, add, addTo.
  4. Анимация: bind('update', callback), изменения свойств по кадрам.
  5. Цветовые эффекты: линейные и радиальные градиенты через Two.Stop.
  6. Интерактивность: доступ к DOM-элементам через _renderer.elem.
  7. Сложные фигуры: vertices, curve, замкнутые и открытые пути.

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

Оглавление