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

Экземпляр Two создается через конструктор Two(params), где params — это объект с конфигурацией. Основные параметры включают:

  • type — определяет рендерер: 'svg', 'canvas' или 'webgl'.
  • width и height — размеры области рисования.
  • autostart — автоматическое начало анимации при создании экземпляра (true/false).

Пример создания экземпляра:

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

После создания экземпляра появляется объект с множеством свойств и методов для управления сценой и объектами.

Основные свойства экземпляра

1. width и height Хранят текущие размеры холста. Можно изменять динамически:

two.width = 1024;
two.height = 768;
two.update();

2. renderer Объект рендерера, автоматически созданный в зависимости от выбранного типа (CanvasRenderer, SVGRenderer или WebGLRenderer). Через него доступна низкоуровневая настройка визуализации.

3. scene Корневой контейнер всех объектов Two.js. Любой объект (Shape, Group, Text) добавляется в сцену:

two.scene.add(rectangle);

4. frameCount Счетчик кадров, увеличивающийся на каждом обновлении. Полезен для анимации:

console.log(two.frameCount); // количество отрисованных кадров

5. playing Логическое свойство, отражающее состояние анимации.

two.playing; // true или false

Основные методы экземпляра

1. appendTo(element) Добавляет холст или SVG в DOM. Возвращает экземпляр Two для цепочек вызовов.

2. upd ate() Принудительно обновляет сцену и рендерит все объекты. Используется при ручной модификации объектов вне цикла анимации:

rectangle.rotation += 0.05;
two.update();

3. play() и pause() Управляют анимацией:

two.pause(); // остановка анимации
two.play();  // продолжение

4. add(...objects) Добавляет один или несколько объектов в сцену. Поддерживаются Shape, Group, Text и кастомные объекты Two.js:

two.add(rectangle, circle);

5. remove(...objects) Удаляет объекты из сцены. После удаления объекты становятся независимыми и не рендерятся.

6. bind(event, callback) Привязывает обработчики к событиям экземпляра. Основные события:

  • 'update' — вызывается на каждом кадре перед рендерингом.
  • 'resize' — срабатывает при изменении размеров холста.
two.bind('update', frameCount => {
  rectangle.rotation += 0.01;
});

7. trigger(event, params) Запускает событие вручную, передавая параметры обработчику.

8. clear() Очищает сцену от всех объектов, не удаляя сам экземпляр.

Управление анимацией и кадрами

Экземпляр Two.js работает на основе цикла анимации: каждый кадр происходит вызов событий 'update' и рендеринг через update().

Методы управления циклом:

  • play() — запускает цикл.
  • pause() — останавливает цикл.
  • frameCount — позволяет отслеживать текущее состояние анимации.

Пример плавного вращения фигуры с использованием frameCount:

two.bind('update', function(frameCount) {
  rectangle.rotation = frameCount * 0.02;
});

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

С помощью метода makeGroup или создания экземпляра Two.Group можно объединять несколько фигур в один объект. Свойства группы влияют на все дочерние элементы:

  • translation — смещение.
  • rotation — вращение всей группы.
  • scale — масштабирование.
const group = two.makeGroup(rectangle, circle);
group.translation.se t(400, 300);
group.rotation = Math.PI / 4;
two.add(group);

Настройка стиля объектов через экземпляр

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

  • fill — цвет заливки.
  • stroke — цвет линии.
  • linewidth — ширина линии.
  • opacity — прозрачность.
rectangle.fill = '#FF0000';
rectangle.stroke = '#000000';
rectangle.linewidth = 5;
rectangle.opacity = 0.8;
two.update();

Динамическое обновление размеров

Свойства width и height позволяют динамически менять размеры сцены и автоматически масштабировать объекты при необходимости. Для адаптации холста под размер окна часто используется:

window.addEventListener('resize', () => {
  two.width = window.innerWidth;
  two.height = window.innerHeight;
  two.update();
});

Интеграция с DOM и взаимодействие с элементами

Метод appendTo упрощает вставку холста в документ, а сочетание событий экземпляра с методами объектов позволяет реализовать интерактивные элементы:

  • Привязка обработчиков мыши к фигурам (mousedown, mousemove, mouseup).
  • Изменение свойств объектов на лету через события 'update'.

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

Оглавление