Что такое Two.js и зачем она нужна

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

Рендеринг и поддержка платформ

Two.js абстрагирует рендеринг, автоматически выбирая между:

  • Canvas – стандартный 2D-контекст браузера.
  • SVG – для векторной графики с возможностью масштабирования без потери качества.
  • WebGL – для ускоренного рендеринга и поддержки аппаратного ускорения.

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

Создание сцены

Сцена в Two.js создаётся через объект Two:

const elem = document.getElementById('draw');
const two = new Two({ width: 800, height: 600 }).appendTo(elem);

Здесь elem — контейнер в DOM, в котором будет рендериться графика. Основные параметры сцены:

  • width и height — размеры холста.
  • fullscreen — опция, позволяющая автоматически растягивать холст на весь экран.
  • type — выбор рендерера (Two.Types.canvas, Two.Types.svg, Two.Types.webgl).

Основные примитивы

Two.js предоставляет набор базовых графических объектов:

  • Прямоугольники (Two.Rectangle)
  • Круги (Two.Circle)
  • Эллипсы (Two.Ellipse)
  • Линии и полигоны (Two.Line, Two.Polygon)
  • Кривые Безье и сплайны (Two.Path, Two.Star)

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

Пример создания круга с обводкой и заливкой:

const circle = two.makeCircle(200, 200, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 5;
two.update();

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

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

const group = two.makeGroup(circle1, circle2, rect);
group.translation.set(100, 50);
group.rotation = Math.PI / 4;
two.update();

Группы наследуют трансформации, поэтому вращение, масштабирование или смещение применяются ко всем элементам группы одновременно.

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

Two.js использует систему анимации на основе requestAnimationFrame. Обновления сцены выполняются в цикле, который можно настраивать через two.bind('update', callback):

two.bind('update', function(frameCount, timeDelta) {
  circle.rotation += 0.02;
});
two.play();

Параметры frameCount и timeDelta позволяют реализовать плавные и синхронизированные анимации. Two.js также поддерживает Tweening и интеграцию с внешними библиотеками анимации для более сложных эффектов.

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

Каждый графический объект имеет следующие ключевые свойства:

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

Для анимации этих свойств можно использовать встроенный механизм интерполяции, позволяющий плавно изменять значения между кадрами.

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

Two.js позволяет обрабатывать события на уровне холста или отдельных объектов:

  • Клики (click)
  • Наведение мыши (mouseover, mouseout)
  • Перетаскивание (drag)

Пример обработки клика по объекту:

circle._renderer.elem.addEventListener('click', () => {
  circle.fill = '#00FF00';
  two.update();
});

Использование в проектах

Two.js подходит для:

  • Веб-анимаций и визуализаций данных.
  • Создания интерактивных графических интерфейсов.
  • Обучающих приложений и прототипирования.
  • Генеративного искусства и визуальных эффектов.

Библиотека облегчает комплексное управление сценой и объектами, сокращает код и повышает производительность за счет интеграции с WebGL.

Преимущества Two.js

  • Кросс-браузерность и поддержка нескольких рендереров.
  • Простота синтаксиса при создании сложных сцен.
  • Декларативное управление объектами и анимациями.
  • Встроенные функции группировки, трансформаций и событий.
  • Гибкость и расширяемость за счёт открытого API и совместимости с другими библиотеками.

Использование Two.js позволяет сосредоточиться на логике и визуальной составляющей проекта, не углубляясь в низкоуровневую работу с Canvas или WebGL.

Оглавление