Matrix и матричные преобразования

В Paper.js каждая трансформация объектов на сцене (перемещение, масштабирование, вращение, наклон) реализуется через матрицы аффинных преобразований. Ключевым элементом для управления этими преобразованиями является объект Matrix, который инкапсулирует параметры преобразования в виде 2D аффинной матрицы 3x3:

| m00  m01  tx |
| m10  m11  ty |
|  0    0   1  |
  • m00, m11 – масштабирование по X и Y.
  • m01, m10 – компоненты наклона (shear).
  • tx, ty – смещение по осям X и Y.

Объект Matrix в Paper.js позволяет выполнять комбинированные трансформации, не изменяя исходные координаты объектов напрямую, а используя математическую композицию матриц.

Создание и инициализация матрицы

var matrix = new paper.Matrix();

По умолчанию создаётся единичная матрица:

| 1  0  0 |
| 0  1  0 |
| 0  0  1 |

Можно создать матрицу с заданными параметрами:

var matrix = new paper.Matrix(1, 0, 0, 1, 50, 100);

Здесь 1, 0, 0, 1 задают стандартное масштабирование без наклона, а 50, 100 – смещение по X и Y.

Применение трансформаций

Смещение (Translation)

Метод translate изменяет tx и ty матрицы:

matrix.translate(30, 50);

После выполнения, все точки, умноженные на эту матрицу, будут сдвинуты на (30, 50).

Масштабирование (Scaling)

Масштабирование выполняется относительно начала координат или заданной точки:

matrix.scale(2, 1.5);          // масштабирование по X в 2 раза, по Y в 1.5
matrix.scale(1.5, 1.5, new paper.Point(100, 100)); // относительно точки (100, 100)

Масштабирование изменяет компоненты m00 и m11. Если указана опорная точка, матрица автоматически включает соответствующее смещение.

Вращение (Rotation)

matrix.rotate(45);                     // вращение на 45 градусов
matrix.rotate(30, new paper.Point(50,50)); // вращение вокруг точки (50,50)

Вращение обновляет элементы m00, m01, m10, m11 с учётом тригонометрических функций.

Наклон (Shear)

Наклон по X и Y выполняется через метод shear:

matrix.shear(20, 10); // угол наклона по X и Y в градусах

Эта операция модифицирует m01 и m10, создавая эффект сдвига координат по осям.

Композиция матриц

Matrix в Paper.js поддерживает умножение матриц, что позволяет комбинировать несколько преобразований:

var m1 = new paper.Matrix();
m1.translate(50, 50);
var m2 = new paper.Matrix();
m2.rotate(30);

m1.append(m2);  // теперь m1 содержит трансляцию и вращение
  • append – применяется матрица после текущей.
  • prepend – применяется до текущей.

Композиция матриц позволяет создавать сложные анимации и трансформации без повторного пересчёта координат.

Применение матрицы к объектам

Любой объект Paper.js (Path, Raster, Group) имеет метод transform, принимающий объект Matrix:

var path = new paper.Path.Circle(new paper.Point(100,100), 50);
var matrix = new paper.Matrix();
matrix.rotate(45, path.bounds.center);
matrix.translate(100, 0);

path.transform(matrix);

После выполнения, круг будет повернут на 45° относительно своего центра и смещён по X на 100 единиц.

Метод applyMatrix управляет тем, будет ли объект прямо изменён (true) или сохраняются его локальные координаты (false по умолчанию в новых версиях Paper.js).

Доступ к параметрам матрицы

Matrix предоставляет свойства для чтения и прямого изменения элементов:

console.log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
matrix.a = 2; // прямое масштабирование по X

Свойства соответствуют стандартным обозначениям в SVG и Canvas API:

  • a = m00, b = m10, c = m01, d = m11
  • tx = смещение по X, ty = смещение по Y

Эта возможность позволяет интегрировать Paper.js с низкоуровневыми Canvas-трансформациями.

Обратная матрица и преобразование точек

Метод invert создаёт обратную матрицу, необходимую для преобразования координат из глобальной системы в локальную:

var invMatrix = matrix.clone();
invMatrix.invert();

var point = new paper.Point(150,200);
var localPoint = invMatrix.transform(point);

Это особенно полезно для работы с событиями мыши и координатами внутри трансформированных групп.

Практическая структура матричных преобразований

  1. Создать объект Matrix для хранения всех трансформаций.
  2. Применять базовые операции: translate, scale, rotate, shear.
  3. Комбинировать матрицы через append/prepend для сложных анимаций.
  4. Преобразовывать объекты через transform.
  5. Использовать обратную матрицу для вычислений обратных координат.

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

Оглавление