Якорные точки как векторы

В библиотеке Two.js каждая фигура имеет собственное свойство translation и rotation, однако центральным элементом управления положением фигуры является anchor point — точка, относительно которой происходит трансформация объекта. По умолчанию, большинство фигур создаются с якорной точкой в центре их геометрии, но её можно изменять для более гибкого позиционирования и анимации.

Якорная точка задаётся через объект Vector:

let circle = two.makeCircle(0, 0, 50);
circle.translation.set(100, 100); // перемещение фигуры
circle.center(); // установка якоря в центр фигуры

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

Работа с векторами

В Two.js векторы представлены объектом Two.Vector, который является основой для всех позиционных и трансформационных операций:

let v = new Two.Vector(50, 100);
v.add(new Two.Vector(10, -20)); // векторная операция сложения
v.multiplyScalar(2);             // умножение на скаляр

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

Ключевые методы Two.Vector:

  • set(x, y) — установка координат вектора.
  • copy(vector) — копирование значений другого вектора.
  • add(vector) и sub(vector) — векторная арифметика.
  • multiplyScalar(n) и divideScalar(n) — масштабирование.
  • length() — вычисление длины (модуля) вектора.
  • normalize() — нормализация вектора.

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

Применение якорных точек в трансформациях

Вращение вокруг произвольной точки

Для вращения объекта вокруг произвольной точки нужно сначала изменить якорную точку, а затем задать угол через свойство rotation:

let rect = two.makeRectangle(0, 0, 80, 40);
rect.translation.set(200, 200);
rect.origin.set(40, 20); // смещение якоря к левому верхнему углу
rect.rotation = Math.PI / 4; // поворот на 45 градусов

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

Масштабирование относительно якоря

Масштабирование также зависит от позиции якорной точки:

rect.scale = 2; // увеличиваем размер в 2 раза

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

Комбинирование трансляции и якоря

Для анимации движения фигуры вдоль сложной траектории используют комбинацию translation и origin. Например:

two.bind('upd ate', function(frameCount, timeDelta) {
  rect.translation.x = 200 + Math.sin(frameCount * 0.05) * 100;
  rect.translation.y = 200 + Math.cos(frameCount * 0.05) * 50;
  rect.rotation += 0.02;
});

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

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

В Two.js группы объектов создаются через Two.Group. Группа имеет собственную якорную точку, влияющую на все дочерние элементы:

let group = two.makeGroup(circle, rect);
group.translation.se t(300, 300);
group.origin.set(50, 50); // смещаем точку вращения всей группы
group.rotation = Math.PI / 6;

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

Динамическое изменение якорной точки

Для интерактивных приложений якорь можно изменять в реальном времени:

two.bind('upd ate', function() {
  circle.origin.se t(Math.sin(Date.now() * 0.001) * 50, 0);
});

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

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

  • Всегда учитывать, что translation и origin — разные вещи: translation перемещает фигуру в глобальных координатах, а origin задаёт точку локальной трансформации.
  • Для сложных анимаций выгодно комбинировать группы и локальные якорные точки.
  • Использование Two.Vector для всех координат упрощает математические операции и анимацию.
  • При создании интерфейсов с перетаскиванием фигур удобнее динамически изменять якорь для поворота и масштабирования под мышью.

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

Оглавление