Управление областью просмотра

Область просмотра в Two.js управляется через элемент Two, который создаёт канвас и сцену. Для её создания используется конструктор Two(params), где params включает размеры канваса, целевой DOM-элемент и режим рендеринга:

const elem = document.getElementById('draw-area');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg, // или Two.Types.canvas / Two.Types.webgl
}).appendTo(elem);
  • width и height задают размеры области просмотра в пикселях.
  • type определяет рендерер: svg, canvas или webgl. WebGL обеспечивает наилучшую производительность при работе с большим количеством объектов.
  • Метод appendTo прикрепляет канвас к выбранному DOM-элементу.

Координатная система и центр сцены

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

two.renderer.setSize(800, 600);
two.scene.translation.set(two.width / 2, two.height / 2);
  • two.width и two.height — размеры области просмотра.
  • scene.translation позволяет перемещать всю сцену, что удобно для организации координат относительно центра.
  • Любые фигуры, добавленные после этого, будут позиционироваться относительно нового центра (400, 300).

Масштабирование сцены

Для динамического изменения размера элементов можно использовать масштабирование сцены через scene.scale:

two.scene.scale = 1.5; // увеличиваем все объекты в 1.5 раза
  • Масштаб влияет на все дочерние элементы сцены.
  • Для отдельных объектов применяется свойство scale у фигуры:
const circle = two.makeCircle(0, 0, 50);
circle.scale = 2; // только этот круг увеличен
  • Масштаб можно изменять плавно в анимации через Two.Tween или ручное обновление в two.update().

Панорамирование и смещение

Панорамирование реализуется через изменение translation сцены. Это позволяет сдвигать видимую область без перемещения объектов:

two.scene.translation.set(200, 100); // смещаем сцену на 200px вправо и 100px вниз
  • При анимации перемещения удобно использовать two.update() и циклы рендеринга:
two.bind('upd ate', function(frameCount) {
  two.scene.translation.x += 1; // плавный сдвиг вправо
}).play();
  • Значения translation задаются в пикселях, и положительные смещения двигают сцену вправо и вниз.

Ограничение области просмотра

Иногда требуется, чтобы объекты, выходящие за пределы канваса, не отображались. Для этого используется свойство clip у группы:

const group = two.makeGroup();
group.clip = new Two.Rectangle(two.width / 2, two.height / 2, two.width, two.height);
  • clip задаёт прямоугольник, ограничивающий видимость объектов в группе.
  • Этот метод позволяет создавать маски и безопасно работать с крупными сценами.

Адаптивная область просмотра

Для адаптивного интерфейса Two.js позволяет привязывать размеры канваса к размерам окна браузера:

window.addEventListener('resize', () => {
  two.width = window.innerWidth;
  two.height = window.innerHeight;
  two.renderer.setSize(two.width, two.height);
  two.scene.translation.se t(two.width / 2, two.height / 2);
});
  • window.innerWidth и window.innerHeight — динамически обновляют размеры.
  • С помощью scene.translation центр сцены остаётся корректным при изменении размеров окна.
  • Полезно для интерактивных приложений и визуализаций.

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

Two.js не имеет встроенной системы слоёв, но можно эмулировать слои через группы:

const background = two.makeGroup();
const foreground = two.makeGroup();

background.add(two.makeRectangle(0, 0, 800, 600));
foreground.add(two.makeCircle(0, 0, 50));
  • Объекты в верхних группах рендерятся поверх нижних.
  • Масштаб и трансляцию можно задавать отдельно для каждой группы, создавая эффекты параллакса.

Краткий пример управления областью просмотра

const two = new Two({ width: 600, height: 400 }).appendTo(document.body);

const group = two.makeGroup();
const circle = two.makeCircle(0, 0, 50);
group.add(circle);

group.translation.set(100, 50);
group.scale = 1.2;

two.bind('update', function() {
  group.rotation += 0.01; // вращение группы
}).play();
  • group.translation задаёт положение всей группы.
  • group.scale масштабирует все фигуры внутри.
  • group.rotation позволяет вращать одновременно все элементы группы.

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

Оглавление