Применение матричных операций

Two.js — это библиотека для рисования 2D-графики с использованием WebGL, Canvas и SVG. Одним из ключевых аспектов управления объектами в Two.js является применение матричных преобразований для перемещения, масштабирования и вращения фигур. Two.js использует собственную систему матриц, основанную на аффинных преобразованиях 3x3, где каждая трансформация задаётся через матрицу:

[ ]

Здесь (a, b, c, d) отвечают за масштабирование, вращение и наклон, а (e, f) — за смещение (translation).

Применение матриц к элементам

Каждый объект Two.js (например, Two.Path, Two.Rectangle, Two.Circle) имеет свойства translation, rotation, scale, skew. Под капотом эти свойства формируют матрицу преобразования, которая применяется при рендеринге.

Пример явного создания и применения матрицы:

const two = new Two({ width: 500, height: 500 }).appendTo(document.body);

const rect = two.makeRectangle(100, 100, 80, 50);
rect.fill = '#3498db';
rect.noStroke();

// Создание матрицы для вращения на 45 градусов и смещения
const angle = Math.PI / 4;
const matrix = new Two.Matrix()
  .identity()
  .translate(200, 150)
  .rotate(angle);

rect.matrix = matrix;

two.update();

Здесь матрица сначала создаётся пустой (identity()), затем применяются смещение (translate) и поворот (rotate). Присвоение rect.matrix заменяет внутреннюю матрицу объекта.

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

В матричных преобразованиях порядок имеет решающее значение. Например:

  1. translate → rotate
  2. rotate → translate

Результат будет разным, так как матрицы умножаются слева направо. Two.js использует постмультипликацию: новая матрица умножается на текущую.

const matrix = new Two.Matrix()
  .rotate(Math.PI / 4)
  .translate(100, 50);

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

Масштабирование и наклон

Масштабирование (scale) и наклон (skew) также реализуются через матрицы. Two.js предоставляет методы:

  • matrix.scale(sx, sy) — масштаб по осям X и Y
  • matrix.skew(sx, sy) — наклон по углам в радианах
rect.matrix.scale(1.5, 0.5);
rect.matrix.skew(0.2, 0);
two.update();

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

Комбинирование нескольких матриц

Для сложных сцен часто нужно объединять матрицы. Two.js позволяет умножать матрицы через метод multiply():

const translateMatrix = new Two.Matrix().translate(100, 50);
const rotateMatrix = new Two.Matrix().rotate(Math.PI / 6);

const combinedMatrix = translateMatrix.multiply(rotateMatrix);

rect.matrix = combinedMatrix;
two.update();

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

Матрицы для групп объектов

Two.js поддерживает группы через Two.Group. Все дочерние элементы наследуют матрицу родителя. Например:

const group = two.makeGroup();
group.translation.set(200, 200);
group.rotation = Math.PI / 8;

const circle = two.makeCircle(0, 0, 50);
const triangle = two.makePolygon(0, 0, 40, 3);

group.add(circle, triangle);
two.update();

В этом примере и круг, и треугольник смещаются и вращаются вместе с группой, без изменения их локальных координат.

Получение и использование матрицы объекта

Каждый объект имеет свойство matrix типа Two.Matrix. Можно прочитать значения a, b, c, d, e, f и использовать их для:

  • Расчёта мировых координат вершин
  • Инверсного преобразования (возврат к локальным координатам)
  • Анимации сложных движений
const m = rect.matrix;
console.log(m.a, m.b, m.c, m.d, m.e, m.f);

Анимация через матрицы

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

two.bind('update', function(frameCount, timeDelta) {
  rect.matrix.rotate(0.01);
  rect.matrix.scale(1 + 0.005 * Math.sin(frameCount * 0.1));
}).play();

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

Инвертирование и трансформация точек

Two.js предоставляет методы apply и inverse для матриц, позволяя трансформировать отдельные точки:

const point = new Two.Vector(10, 20);
const transformed = rect.matrix.multiply(point); // применить матрицу
const original = rect.matrix.inverse().multiply(transformed); // вернуть в локальные координаты

Эта техника полезна при обработке столкновений, кликов мыши и интерактивных сцен.

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

  • Сложные движения объектов без изменения их локальных свойств
  • Объединение нескольких трансформаций в единую матрицу для оптимизации рендеринга
  • Управление группами и сценами с иерархией объектов
  • Анимации с непрерывным вращением, масштабированием и деформацией

Матричные операции в Two.js обеспечивают полный контроль над позиционированием и трансформацией объектов, позволяя строить динамичные и сложные 2D-сцены.

Оглавление