Параметры инициализации

Для работы с Two.js первым шагом является инициализация экземпляра библиотеки. Основной класс Two принимает объект настроек, которые определяют способ рендеринга, размер холста и режим работы с DOM-элементами. Синтаксис выглядит следующим образом:

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg, // Возможные значения: svg, canvas, webgl
  autostart: true
}).appendTo(document.body);
  • width и height задают размеры области рисования. Эти параметры могут быть заданы как числа или проценты относительно контейнера.
  • type определяет метод рендеринга: svg, canvas или webgl. Выбор типа влияет на производительность и доступные возможности (например, SVG обеспечивает высокое качество при масштабировании, WebGL — аппаратное ускорение).
  • autostart контролирует автоматическое начало анимации. Если значение false, для запуска необходимо вызвать метод two.play() вручную.

Параметры рендеринга

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

  • fullscreen — если true, холст растягивается на весь экран, игнорируя width и height.
  • ratio — коэффициент масштабирования, который учитывает плотность пикселей дисплея. Полезен для поддержки Retina-экранов.
  • domElement — возможность передать собственный HTML-элемент, в который будет встроен рендеринг, вместо автоматического создания <canvas> или <svg>.

Пример:

const container = document.getElementById('canvas-container');
const two = new Two({
  width: 1024,
  height: 768,
  type: Two.Types.webgl,
  ratio: window.devicePixelRatio,
  domElement: container
});
two.appendTo(container);

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

Two.js строит сцену из объектов типа Group, Shape и Path. При инициализации экземпляра Two создаётся пустая сцена, к которой можно добавлять графические элементы. Анимация в Two.js работает через цикл рендеринга, управляемый методом two.update():

  • two.play() — запускает цикл анимации.
  • two.pause() — останавливает обновления сцены.
  • two.update()` — ручной вызов обновления сцены для статических сцен без анимации.

Также можно использовать событие update для создания интерактивных эффектов:

two.bind('update', function(frameCount) {
  // frameCount — количество кадров с момента старта
});

Настройка фона и размеров холста

Фон холста задаётся через объект renderer экземпляра Two:

two.renderer.setClearColor(0x000000, 1.0); // черный фон с полной непрозрачностью

Размер холста можно динамически изменять после инициализации:

two.width = 1200;
two.height = 800;
two.update();

При изменении размеров рекомендуется учитывать сохранение пропорций объектов и их центрирование.

Дополнительные параметры для SVG и WebGL

Для SVG доступны следующие опции:

  • svgPrecision — количество знаков после запятой при генерации координат. Повышение точности улучшает визуальное качество, но увеличивает размер SVG.
  • responsive — автоматическая адаптация SVG к размеру контейнера при изменении размеров окна.

Для WebGL:

  • antialias — включает сглаживание краёв.
  • alpha — управляет прозрачностью фона.
  • preserveDrawingBuffer — сохраняет содержимое холста после рендеринга, важно для сохранения снимков сцены.

Передача параметров через объект конфигурации

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

const config = {
  width: 800,
  height: 600,
  type: Two.Types.canvas,
  autostart: true,
  fullscreen: false,
  ratio: window.devicePixelRatio
};

const two = new Two(config).appendTo(document.body);

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

Взаимодействие с DOM и контейнерами

Two.js не ограничивается автоматическим созданием <canvas> или <svg>: можно использовать существующие элементы страницы. Метод appendTo() принимает любой DOM-узел, что удобно для интеграции в сложные интерфейсы:

const container = document.querySelector('#myCanvasContainer');
two.appendTo(container);

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

Практические рекомендации

  • Всегда задавать width и height либо использовать fullscreen, чтобы избежать непредсказуемого поведения.
  • При работе с Retina-дисплеями использовать параметр ratio для правильного отображения.
  • Для сложных сцен с анимацией предпочтительно управлять циклом вручную через two.update() и события update, чтобы оптимизировать производительность.
  • Для SVG важно настраивать svgPrecision для уменьшения веса документа без потери визуального качества.

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

Оглавление