Точка трансформации

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

По умолчанию точка трансформации находится в центре объекта. Например, для прямоугольника с координатами (x, y) и размерами (width, height) точка трансформации будет (x + width/2, y + height/2).

let rect = two.makeRectangle(100, 100, 50, 50);

В этом случае rect.translation определяет смещение центра прямоугольника относительно холста.

Свойства трансформации

translation

translation отвечает за позицию объекта на холсте. Это объект с полями x и y, которые определяют смещение центра фигуры.

rect.translation.set(200, 150);

rotation

rotation задаёт угол поворота фигуры в радианах относительно точки трансформации. Положительное значение поворачивает объект по часовой стрелке.

rect.rotation = Math.PI / 4; // поворот на 45 градусов

scale

scale контролирует размер объекта. Свойство scale является объектом с полями x и y, которые определяют масштаб по соответствующим осям.

rect.scale.x = 2; // удвоение ширины
rect.scale.y = 0.5; // уменьшение высоты в два раза

Изменение точки трансформации

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

rect.origin.set(25, 25); // смещение точки трансформации в левый верхний угол

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

Комбинирование трансформаций

Трансформации можно комбинировать, но порядок имеет значение. Two.js применяет операции в следующем порядке:

  1. масштабирование относительно точки трансформации
  2. поворот относительно точки трансформации
  3. смещение (translation) на холсте

Пример:

rect.scale.set(1.5, 1.5);
rect.rotation = Math.PI / 6;
rect.translation.set(300, 200);

Здесь прямоугольник сначала увеличивается в 1.5 раза, затем поворачивается на 30 градусов, а после этого смещается к координатам (300, 200).

Применение трансформаций к группам

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

let group = two.makeGroup(rect, circle);
group.translation.set(400, 300);
group.rotation = Math.PI / 8;

Все объекты внутри group будут перемещаться и вращаться вместе, сохраняя свои локальные координаты относительно группы.

Практическое использование точки трансформации

  1. Анимация вращения: вращение объектов вокруг определённой точки, не обязательно центра, для создания сложных движений.
  2. Масштабирование объектов относительно конкретной точки: полезно для интерфейсных элементов и эффектов увеличения.
  3. Сложные комбинации объектов: сцены с несколькими фигурами и вложенными группами, где точка трансформации каждой группы управляет общим поведением.
two.bind('update', function(frameCount, timeDelta) {
    rect.rotation += 0.01; // непрерывное вращение
    group.scale.x = 1 + 0.5 * Math.sin(frameCount * 0.05);
});

Советы по управлению точкой трансформации

  • Для простых объектов часто достаточно центра, но для асимметричных фигур лучше задавать origin вручную.
  • При работе с группами полезно создавать пустые объекты как «точки привязки» для точной трансформации всех элементов одновременно.
  • В анимациях изменение translation, rotation и scale следует синхронизировать с точкой трансформации, чтобы движения выглядели естественно.

Итоговые рекомендации по точке трансформации

  • Всегда проверять позицию origin перед сложными трансформациями.
  • Использовать группы для управления несколькими объектами одновременно.
  • Применять комбинации scale, rotation и translation последовательно, учитывая порядок операций.

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

Оглавление