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

В Paper.js pivot point или точка трансформации играет ключевую роль при вращении, масштабировании и других трансформациях объектов. Она определяет, относительно какой координаты будет происходить трансформация, и напрямую влияет на визуальный результат.

Координаты pivot point

Каждый объект в Paper.js (Path, Shape, Group, Raster) имеет позицию (position) и центральную точку (bounds.center). По умолчанию трансформации происходят относительно центра объекта:

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'blue'
});

// Вращение на 45 градусов относительно центра
circle.rotate(45);

Здесь объект вращается вокруг своей центральной точки (circle.bounds.center). Если требуется вращение вокруг другой точки, необходимо явно указать pivot:

circle.rotate(45, new Point(150, 150));

В этом примере точка [150, 150] становится pivot point, вокруг которой происходит вращение.

Трансформация с pivot

Методы Paper.js, связанные с трансформацией, поддерживают указание pivot:

  • rotate(angle, pivotPoint) – вращение объекта на угол angle относительно pivotPoint.
  • scale(factor, pivotPoint) – масштабирование относительно pivotPoint.
  • translate(delta) – смещение объекта на вектор delta.

Пример масштабирования относительно точки вне центра:

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [100, 60],
    fillColor: 'green'
});

// Масштабирование в 2 раза относительно точки [200, 100]
rect.scale(2, new Point(200, 100));

В результате, объект увеличится с учетом указанной точки как якоря.

Работа с pivot в группах объектов

Для Group pivot также можно задавать индивидуально или использовать общий центр группы:

var circle1 = new Path.Circle([50, 50], 20);
var circle2 = new Path.Circle([100, 50], 20);
var group = new Group([circle1, circle2]);

// Вращение группы на 30 градусов относительно внешнего pivot
group.rotate(30, new Point(100, 100));

Группа будет вращаться как единое целое, при этом каждый объект сохраняет свои координаты относительно pivot группы.

Изменение pivot через Matrix

Для сложных трансформаций можно использовать матрицу трансформации (Matrix), где pivot задается через смещение перед и после операции:

var rect = new Path.Rectangle([50, 50], [100, 50]);
var pivot = new Point(200, 150);
var matrix = new Matrix();
matrix.translate(-pivot.x, -pivot.y); // смещаем pivot в начало координат
matrix.rotate(45); // вращение
matrix.translate(pivot.x, pivot.y); // возвращаем на исходное место
rect.transform(matrix);

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

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

  • Для анимации и интерактивных элементов часто выгодно создавать скрытый pivot-объект, вокруг которого будут трансформироваться видимые объекты.
  • Для объектов, требующих локальных трансформаций (например, руки персонажей), рекомендуется использовать группы и задавать pivot для группы, а не для отдельных элементов.
  • Pivot вне центра объекта позволяет создавать эффект «вращения на петле» или сложные визуальные композиции без ручного пересчета координат.

Сводка основных свойств и методов

Свойство / Метод Описание
position Центральная позиция объекта, по умолчанию используется как pivot
bounds.center Геометрический центр объекта
rotate(angle, pivotPoint) Вращение объекта на угол относительно pivotPoint
scale(factor, pivotPoint) Масштабирование относительно pivotPoint
translate(delta) Смещение объекта на вектор delta
transform(matrix) Применение сложной матрицы трансформации с возможностью задания pivot

Эффективное управление pivot point позволяет создавать динамичные сцены и анимации в Paper.js, сохраняя полный контроль над точкой опоры при трансформациях.

Оглавление