Матрица трансформации и класс Matrix

В библиотеке PixiJS для работы с позиционированием, масштабированием и вращением объектов используется класс Matrix. Это основа системы трансформаций, которая позволяет эффективно управлять координатами спрайтов, контейнеров и графических элементов. Matrix представляет собой 2D-аффинную матрицу размером 3x3, хотя в PixiJS хранится только 6 компонентов: a, b, c, d, tx, ty.

Формально матрица выглядит как:

| a  c  tx |
| b  d  ty |
| 0  0   1 |

Где:

a и d отвечают за масштабирование по осям X и Y.
b и c отвечают за вращение и наклон (skew).
tx и ty задают смещение по X и Y.

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

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

Для создания новой матрицы используется конструктор:

const matrix = new PIXI.Matrix();

По умолчанию матрица является единичной, то есть не вносит изменений в координаты:

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

Также можно сразу задать параметры:

const matrix = new PIXI.Matrix(a, b, c, d, tx, ty);

Пример с конкретными значениями:

const matrix = new PIXI.Matrix(1, 0, 0, 1, 100, 50);

Такая матрица перемещает объект на 100 пикселей вправо и на 50 пикселей вниз.

Основные методы класса `Matrix`

1. identity() Сбрасывает матрицу к единичной, удаляя все трансформации.

matrix.identity();

2. append(matrix) Применяет другую матрицу после текущей, что соответствует последовательному выполнению трансформаций.

3. prepend(matrix) Применяет другую матрицу перед текущей, что изменяет порядок комбинирования трансформаций.

4. translate(x, y) Добавляет смещение к объекту:

matrix.translate(20, 30);

5. scale(x, y) Масштабирует объект по осям:

matrix.scale(2, 0.5);

6. rotate(angle) Вращает объект на угол в радианах:

matrix.rotate(Math.PI / 4);

7. invert() Инвертирует матрицу, что необходимо для обратного преобразования координат. Полезно при реализации взаимодействия с мышью и конвертации мировых координат в локальные.

matrix.invert();

8. apply(pos, newPos) Применяет матрицу к точке, возвращая новую позицию:

const point = { x: 10, y: 20 };
const transformed = matrix.apply(point);

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

Матрицы позволяют объединять смещение, масштабирование, вращение и наклон в одну операцию. Порядок операций имеет критическое значение:

const matrix = new PIXI.Matrix();
matrix.translate(50, 50);   // смещение
matrix.rotate(Math.PI / 6); // вращение
matrix.scale(2, 2);         // масштабирование

Эта последовательность отличается от изменения порядка:

const matrix2 = new PIXI.Matrix();
matrix2.scale(2, 2);
matrix2.rotate(Math.PI / 6);
matrix2.translate(50, 50);

Результат будет другим, поскольку умножение матриц некоммутативно.

Использование матрицы с DisplayObject

Каждый объект PixiJS (Sprite, Container) имеет свойства:

position – смещение объекта.
scale – масштабирование.
rotation – угол вращения.
pivot – точка вращения.

За кулисами библиотека создает внутреннюю матрицу localTransform, комбинируя эти свойства:

sprite.updateTransform();
console.log(sprite.transform.localTransform); // PIXI.Matrix

Эта матрица преобразует локальные координаты спрайта в координаты родителя. Для вычисления координат относительно сцены используется worldTransform.

Примеры применения матриц

Перевод координат сцены в локальные координаты спрайта:

const globalPoint = { x: 400, y: 300 };
const localMatrix = sprite.worldTransform.clone().invert();
const localPoint = localMatrix.apply(globalPoint);

Комбинированное вращение и масштабирование контейнера:

const container = new PIXI.Container();
container.transform.localTransform.rotate(Math.PI / 4);
container.transform.localTransform.scale(1.5, 1.5);

Наклон (skew) объекта:

matrix.set(1, Math.tan(0.3), Math.tan(0.2), 1, 0, 0);

Важные особенности

Производительность: работа с одной матрицей быстрее, чем многократные операции над координатами.
Иерархия объектов: трансформации родителя автоматически влияют на детей через worldTransform.
Обратное преобразование: инверсия матрицы позволяет конвертировать координаты между системами координат.
Комбинирование: append и prepend дают полный контроль над порядком применения трансформаций.