Конструктор Two

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

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // или 'canvas', 'webgl'
}).appendTo(document.body);
  • width, height — задают размеры области рисования.
  • type — определяет тип рендеринга: svg, canvas, webgl.
  • domElement — при использовании appendTo Two автоматически помещает канвас в указанный контейнер.

Добавление фигур и объектов

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

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

// Создание прямоугольника
const rect = two.makeRectangle(200, 150, 100, 50);

// Создание линии
const line = two.makeLine(0, 0, 300, 300);

Ключевые свойства объектов:

  • translation — позиция объекта на сцене.
  • rotation — угол поворота в радианах.
  • scale — масштабирование по осям X и Y.
  • stroke и fill — цвет обводки и заливки.
  • linewidth — толщина линии для фигур с контуром.
circle.fill = '#FF0000';
circle.stroke = '#000000';
circle.linewidth = 5;

Работа с группами

Для организации сцены можно использовать группы объектов (Group). Группа позволяет одновременно трансформировать все её элементы:

const group = two.makeGroup(circle, rect);
group.translation.set(100, 50);
group.rotation = Math.PI / 4;
  • Все объекты внутри группы сохраняют относительные координаты.
  • Трансформации группы автоматически применяются ко всем её элементам.
  • Группы можно вкладывать друг в друга, создавая иерархию сцены.

Анимация и обновление сцены

Two.js имеет встроенный цикл анимации, управляемый методом update и функцией bind:

two.bind('upd ate', function(frameCount) {
  circle.rotation += 0.02;
}).play();
  • frameCount — количество кадров с момента запуска анимации.
  • bind('upd ate', callback) — регистрирует функцию обновления сцены на каждый кадр.
  • play() — запускает автоматическое обновление сцены.
  • pause() и resume() управляют состоянием анимации.

Метод two.update() позволяет вручную обновлять сцену после изменения свойств объектов.

Настройка стилей и материалов

Каждый объект поддерживает гибкую настройку внешнего вида:

rect.fill = 'rgba(0, 128, 255, 0.5)';
rect.stroke = '#FFAA00';
rect.linewidth = 3;
rect.opacity = 0.75;
  • opacity — прозрачность фигуры.
  • Поддерживаются линейные и радиальные градиенты через Two.LinearGradient и Two.RadialGradient.
const gradient = new Two.LinearGradient(0, 0, 100, 100, [
  new Two.Stop(0, '#FF0000'),
  new Two.Stop(1, '#0000FF')
]);
rect.fill = gradient;

Преобразования объектов

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

  • translation.se t(x, y) — установка позиции.
  • rotation — угол поворота.
  • scale.se t(sx, sy) — масштабирование по осям.
  • mirror() — отражение относительно осей.
circle.translation.set(300, 200);
circle.scale.set(2, 1.5);

События и взаимодействие

Two.js поддерживает базовую обработку событий на уровне объектов:

circle._renderer.elem.addEventListener('click', () => {
  circle.fill = '#00FF00';
  two.update();
});
  • События привязываются к DOM-элементу через _renderer.elem.
  • После изменения свойств необходимо вызвать two.update() для перерисовки сцены.

Экспорт и интеграция

Конструктор Two позволяет экспортировать сцену в разные форматы:

const svgOutput = two.renderer.domElement.outerHTML;
const canvas = two.renderer.domElement;
  • svgOutput — строка SVG, пригодная для вставки в HTML.
  • Для Canvas и WebGL можно использовать стандартные методы контекста рендерера для сохранения изображения.

Продвинутая настройка

Two.js поддерживает глобальные параметры сцены:

two.background = '#F0F0F0';
two.friction = 0.1; // для физических симуляций
two.gravity = new Two.Vector(0, 1);
  • background — цвет фона сцены.
  • friction и gravity используются в комбинации с физическими объектами и анимациями.

Итоговая структура сцены

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

Оглавление