Класс Transform и его внутренняя структура

Класс Transform в PixiJS отвечает за управление положением, масштабом, поворотом и наклоном объектов в 2D-пространстве. Он является базовым строительным блоком для всех визуальных элементов, наследующихся от DisplayObject. Понимание его внутренней структуры и методов критично для оптимизации графических приложений.

Основные свойства

Transform содержит несколько ключевых свойств, которые определяют его состояние:

  • position (PIXI.Point) — координаты объекта в локальной системе отсчёта.
  • scale (PIXI.ObservablePoint) — масштаб по осям X и Y. Может быть положительным или отрицательным для отражения.
  • rotation (number) — угол поворота в радианах.
  • skew (PIXI.ObservablePoint) — наклон по осям X и Y. Используется для создания эффектов перспективы и деформации.
  • pivot (PIXI.ObservablePoint) — точка вращения и масштабирования относительно локальной системы координат объекта.
  • localTransform (PIXI.Matrix) — матрица, описывающая трансформацию объекта в локальных координатах.
  • worldTransform (PIXI.Matrix) — матрица, которая преобразует локальные координаты объекта в мировую систему отсчёта сцены.

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

Локальная и мировая матрицы

localTransform

localTransform формируется на основе комбинации позиции, масштаба, поворота, наклона и точки pivot. Алгоритм построения матрицы следующий:

  1. Применяется смещение на pivot:

    T_pivot = Matrix.translation(-pivot.x, -pivot.y)

  2. Применяется масштабирование:

    S = Matrix.scale(scale.x, scale.y)

  3. Применяется наклон (skew):

    K = Matrix.skew(skew.x, skew.y)

  4. Применяется поворот:

    R = Matrix.rotation(rotation)

  5. Применяется смещение по позиции:

    T_pos = Matrix.translation(position.x, position.y)

  6. Финальная локальная матрица:

    localTransform = T_pos * R * K * S * T_pivot

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

worldTransform

worldTransform формируется умножением локальной матрицы на матрицу родителя:

worldTransform = parent.worldTransform * localTransform

Если объект не имеет родителя, мировая матрица равна локальной. worldTransform используется для рендеринга и вычисления глобальных координат, коллизий и hit-тестов.

Методы обновления

Класс Transform содержит несколько ключевых методов для работы с матрицами:

  • updateLocalTransform() — пересчитывает локальную матрицу на основе текущих свойств объекта (position, scale, rotation, skew, pivot). Вызывается автоматически при изменении этих свойств.
  • updateTransform(parentTransform: Matrix) — обновляет мировую матрицу объекта, используя мировую матрицу родителя. Этот метод рекурсивно применяется ко всем потомкам.
  • setFromMatrix(matrix: Matrix) — задаёт все свойства трансформации (position, scale, rotation, skew) исходя из переданной матрицы. Полезно для восстановления состояния объекта из сохранённых данных.
  • apply(matrix: Matrix) — применяет дополнительную матрицу к локальной матрице, позволяя комбинировать трансформации без прямого изменения отдельных свойств.

Оптимизация и внутренние флаги

Для повышения производительности Transform использует флаги кеширования:

  • **_localID** и **_currentLocalID** — отслеживают изменения локальной матрицы.
  • **_worldID** и **_parentID** — отслеживают изменения мировой матрицы и матрицы родителя.

Если идентификаторы совпадают, пересчёт матриц не производится. Это позволяет минимизировать лишние вычисления при анимации и трансформациях сцен с большим количеством объектов.

Примеры практического применения

  • Родительские и дочерние объекты: Изменяя position родителя, все дочерние объекты автоматически наследуют трансформацию через worldTransform.

  • Анимация: Для плавного вращения и масштабирования объектов изменяют свойства rotation и scale на каждом кадре, что приводит к автоматическому пересчёту localTransform.

  • Hit-тесты и взаимодействие: worldTransform используется для перевода координат курсора или касания в локальные координаты объекта, что делает возможным точное определение пересечений.

Взаимодействие с другими классами

Класс Transform является частью иерархии сцены PixiJS и тесно интегрирован с:

  • DisplayObject — базовый визуальный объект, который содержит свойство transform.
  • Container — объект, который может иметь потомков; обновление мировых матриц распространяется на всех детей.
  • Matrix — класс, предоставляющий методы умножения, инверсии и деформации матриц.

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

Оглавление