Two.Matrix и матричные операции

В библиотеке Two.js класс Two.Matrix представляет собой фундаментальный инструмент для работы с аффинными преобразованиями в 2D-пространстве. Он позволяет выполнять трансформации объектов — смещение, масштабирование, поворот и наклон — с высокой точностью и эффективностью.

Каждая матрица в Two.js задаётся шестью параметрами: a, b, c, d, e, f, которые соответствуют компонентам стандартной 3x3 аффинной матрицы:

[ ]

  • a, d — масштабирование по осям X и Y.
  • b, c — наклон (skew).
  • e, f — смещение (translation) по осям X и Y.

Этот формат совпадает с синтаксисом CSS и SVG, что упрощает интеграцию с веб-технологиями.

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

Создать новую матрицу можно через конструктор Two.Matrix:

let matrix = new Two.Matrix(); // создаёт единичную матрицу

Единичная матрица имеет значения:

a = 1, b = 0, c = 0, d = 1, e = 0, f = 0

Можно сразу задать конкретные значения при создании:

let matrix = new Two.Matrix(2, 0, 0, 2, 100, 50);

Эта матрица масштабирует объект в два раза и смещает его на (100, 50).

Основные методы Two.Matrix

identity()

Сбрасывает матрицу к единичной:

matrix.identity();

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

set(a, b, c, d, e, f)

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

matrix.set(1, 0, 0, 1, 50, 50);

multiply(matrixB)

Производит умножение текущей матрицы на другую матрицу matrixB.

let m1 = new Two.Matrix(1, 0, 0, 1, 10, 20);
let m2 = new Two.Matrix(2, 0, 0, 2, 0, 0);
m1.multiply(m2); // теперь m1 комбинирует оба преобразования

Умножение матриц — ключевой инструмент для композиции трансформаций, например, поворот и смещение одновременно.

inverse()

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

let inv = matrix.inverse();

clone()

Создаёт полную копию текущей матрицы:

let copy = matrix.clone();

Полезно для сохранения состояния объекта перед выполнением сложных преобразований.

rotate(theta)

Поворачивает матрицу на угол theta (в радианах) относительно начала координат:

matrix.rotate(Math.PI / 4); // поворот на 45 градусов

Внутренне метод использует стандартную формулу поворота:

[ ]

translate(x, y)

Смещает матрицу на вектор (x, y):

matrix.translate(100, 50);

Комбинируется с другими трансформациями без потери информации.

scale(sx, sy)

Масштабирует матрицу по осям X и Y. Если sy не указан, используется равный sx:

matrix.scale(2); // увеличивает объект в 2 раза
matrix.scale(1, 0.5); // масштаб X=1, Y=0.5

toString()

Возвращает строковое представление матрицы в формате CSS/SVG:

let str = matrix.toString(); 
// "matrix(a, b, c, d, e, f)"

Это удобно для динамического применения стилей к DOM-элементам или SVG-графике.

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

Комбинируя методы translate, rotate, scale и multiply, можно строить сложные последовательные преобразования. Важный момент — порядок операций имеет значение:

let m = new Two.Matrix();
m.translate(50, 50);
m.rotate(Math.PI / 2);
m.scale(2, 2);

В этом примере сначала объект сдвигается, затем поворачивается и масштабируется. Если поменять порядок, результат будет отличаться.

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

Любой объект в Two.js (например, Two.Path, Two.Rectangle) имеет свойство matrix. Чтобы применить трансформацию:

let rect = two.makeRectangle(0, 0, 100, 50);
let m = new Two.Matrix();
m.translate(50, 50).rotate(Math.PI / 4);
rect.matrix.multiply(m);
rect._update(); // обновление объекта после изменения матрицы

Метод _update() пересчитывает позиции вершин объекта с учётом новой матрицы.

Наклон и нестандартные трансформации

Компоненты b и c позволяют реализовать наклон (skew) объектов:

let skewMatrix = new Two.Matrix(1, Math.tan(Math.PI/6), Math.tan(Math.PI/12), 1, 0, 0);
rect.matrix.multiply(skewMatrix);
rect._update();

Таким образом можно создавать перспективные эффекты и сложные деформации.

Практические советы

  • Для динамических анимаций лучше использовать клонирование матриц и multiply вместо ручного вычисления каждого значения.
  • Метод inverse полезен для обратного преобразования координат курсора или объектов при сложных трансформациях.
  • Связка toString() + CSS позволяет интегрировать Two.js с DOM без потери качества визуализации.
  • Следует внимательно следить за порядком операций, особенно при комбинировании translate, rotate и scale.

Итоговые возможности

Two.Matrix обеспечивает полный набор инструментов для:

  • Смещения, масштабирования и поворота объектов.
  • Композиции сложных аффинных преобразований.
  • Обратных вычислений и сохранения состояния.
  • Интеграции с CSS и SVG через строковое представление.

Эта гибкость делает его центральным элементом для создания динамических, интерактивных и анимированных сцен в Two.js.

Оглавление