Rotation и вращение

В Paper.js каждый объект, будь то Path, Shape или Group, обладает методом rotate(angle, center), который позволяет вращать его на заданный угол в градусах. Параметр angle задаёт величину поворота (положительные значения — по часовой стрелке, отрицательные — против часовой стрелки). Параметр center задаёт точку, относительно которой выполняется вращение; если не указан, вращение происходит относительно центра объекта.

var circle = new Path.Circle(new Point(100, 100), 50);
circle.fillColor = 'blue';
circle.rotate(45); // Вращение на 45 градусов относительно центра круга

Если нужно вращать объект вокруг произвольной точки, достаточно передать её вторым аргументом:

var point = new Point(200, 200);
circle.rotate(30, point); // Вращение на 30 градусов вокруг точки (200,200)

Вращение групп объектов

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

var path1 = new Path.Rectangle(new Point(50, 50), new Size(80, 40));
path1.fillColor = 'red';

var path2 = new Path.Circle(new Point(150, 100), 30);
path2.fillColor = 'green';

var group = new Group([path1, path2]);
group.rotate(60); // Вращение всей группы на 60 градусов

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

group.pivot = new Point(100, 100);
group.rotate(45); // Вращение группы вокруг точки (100,100)

Пошаговое вращение и анимация

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

var rectangle = new Path.Rectangle(new Point(100, 100), new Size(100, 60));
rectangle.fillColor = 'orange';

function onFrame(event) {
    rectangle.rotate(2); // Вращение на 2 градуса каждый кадр
}

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

function onFrame(event) {
    var angle = Math.sin(event.count / 10) * 5;
    rectangle.rotate(angle);
}

Такое вращение создаёт эффект колебания объекта.

Свойство pivot и его использование

Свойство pivot объекта определяет точку вращения, к которой применяются все трансформации (rotate, scale). По умолчанию pivot — это центр объекта. Для точного управления вращением можно задать pivot вручную:

var triangle = new Path.RegularPolygon(new Point(200, 200), 3, 60);
triangle.fillColor = 'purple';
triangle.pivot = new Point(150, 150); // Изменение точки вращения
triangle.rotate(90); // Вращение вокруг новой точки

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

Вращение сложных фигур и кривых

Кривые и сложные пути (Path) могут вращаться полностью как единое целое. Paper.js сохраняет все контрольные точки кривой относительно центра вращения.

var curve = new Path();
curve.add(new Point(50, 200));
curve.cubicCurveTo(new Point(150, 50), new Point(250, 350), new Point(350, 200));
curve.strokeColor = 'black';
curve.rotate(45);

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

Комбинирование вращения с другими трансформациями

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

var star = new Path.Star(new Point(200, 200), 5, 50, 100);
star.fillColor = 'yellow';

star.rotate(30); // Сначала вращение
star.scale(1.5); // Затем масштабирование
star.translate(new Point(50, 0)); // Смещение

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

Вращение с использованием матриц трансформаций

Для точного и повторяемого управления вращением и другими преобразованиями используется класс Matrix:

var matrix = new Matrix();
matrix.translate(100, 100); // Перемещаем центр вращения
matrix.rotate(45);           // Поворот на 45 градусов
matrix.translate(-100, -100);

circle.transform(matrix);

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

Итоговые ключевые моменты вращения

  • Метод rotate(angle, center) вращает объект на заданный угол.
  • Свойство pivot задаёт точку вращения.
  • Группы (Group) позволяют вращать несколько объектов одновременно.
  • Анимация вращения возможна через onFrame.
  • Комбинирование с другими трансформациями требует внимания к порядку операций.
  • Использование матриц (Matrix) обеспечивает контроль над сложными трансформациями.

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

Оглавление