Центрирование сцены

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

Установка размеров и центра холста

Создание экземпляра Two.js начинается с инициализации:

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

Чтобы центрировать сцену, важно определить центр холста:

const centerX = two.width / 2;
const centerY = two.height / 2;

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

Использование групп для центрирования

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

const group = two.makeGroup();
group.translation.set(centerX, centerY);

Теперь все фигуры, добавленные в group, будут смещены относительно центра холста.

const circle = two.makeCircle(0, 0, 50);
circle.fill = '#FF8000';
circle.stroke = 'orangered';
circle.linewidth = 5;

group.add(circle);

Поскольку circle имеет координаты (0, 0) внутри группы, он окажется точно в центре холста.

Трансформации относительно центра

После центрирования сцены с помощью группы можно легко применять следующие трансформации:

  • Вращение группы:
two.bind('upd ate', function(frameCount) {
  group.rotation += 0.02;
}).play();
  • Масштабирование относительно центра:
group.scale = 1.5;
  • Перемещение относительно центра:
group.translation.x += 1; // сдвиг вправо
group.translation.y -= 0.5; // сдвиг вверх

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

Центрирование нескольких объектов без группы

Если использование группы нежелательно, можно центрировать объекты вручную, смещая их координаты на (centerX, centerY):

const rect = two.makeRectangle(centerX, centerY, 100, 50);
rect.fill = '#00A2FF';
rect.stroke = '#0055AA';
rect.linewidth = 4;

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

Автоматическое центрирование при ресайзе окна

Для динамического изменения размеров холста и сохранения центра сцены необходимо отслеживать событие изменения окна:

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

  const newCenterX = two.width / 2;
  const newCenterY = two.height / 2;

  group.translation.se t(newCenterX, newCenterY);
  two.update();
});

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

Практические советы

  1. Использовать группы для всех объектов, которые должны быть центрированы, чтобы упростить трансформации.
  2. Не полагаться на абсолютные координаты при работе с анимацией — лучше смещать объекты относительно центра.
  3. Обновлять центр сцены при ресайзе для адаптивного интерфейса.
  4. Сочетать центрирование с орбитальной анимацией для создания эффектных визуализаций.

Пример комплексного центрирования с несколькими фигурами

const group = two.makeGroup();
group.translation.set(centerX, centerY);

const circle = two.makeCircle(0, 0, 50);
circle.fill = '#FF6347';

const square = two.makeRectangle(100, 0, 50, 50);
square.fill = '#4682B4';

group.add(circle, square);

two.bind('update', () => {
  group.rotation += 0.01;
}).play();

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

Оглавление