Применение пользовательских матриц

Snap.svg предоставляет мощный механизм работы с трансформациями элементов через матрицы. В отличие от простых методов translate, rotate или scale, пользовательские матрицы дают полный контроль над преобразованиями: можно комбинировать сдвиги, вращения, масштабирование и наклоны в одной структуре.

Матрица в Snap.svg представлена объектом Snap.Matrix и имеет вид:

var m = new Snap.Matrix(a, b, c, d, e, f);

где коэффициенты определяются стандартной 2D аффинной матрицей:

[ ]

  • a и d — масштаб по X и Y
  • b и c — сдвиг для наклона
  • e и f — смещение по X и Y

Эта структура позволяет выполнять любые линейные преобразования, включая сложные комбинации вращений и масштабов.

Создание и применение матриц

Создание новой матрицы осуществляется через конструктор Snap.Matrix() или методы объекта Snap:

var matrix = new Snap.Matrix();

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

Применение матрицы к элементу выполняется через метод transform():

var rect = s.rect(50, 50, 100, 100);
var matrix = new Snap.Matrix();
matrix.translate(20, 30);
matrix.rotate(45);
rect.transform(matrix);

В этом примере:

  • translate(20, 30) сдвигает прямоугольник на 20px вправо и 30px вниз
  • rotate(45) вращает элемент на 45 градусов относительно его текущего центра

Основные методы объекта Snap.Matrix

1. translate(dx, dy) — сдвиг по X и Y 2. scale(sx, sy, cx, cy) — масштабирование относительно точки (cx, cy) 3. rotate(angle, cx, cy) — вращение на угол angle вокруг точки (cx, cy) 4. skewX(angle) / skewY(angle) — наклон по оси X или Y 5. invert() — обратная матрица, полезно для обратных преобразований 6. add(matrix) — комбинирование с другой матрицей, результат сохраняется

Пример комбинирования нескольких преобразований:

var m1 = new Snap.Matrix().translate(50, 50);
var m2 = new Snap.Matrix().rotate(30);
m1.add(m2); // комбинированная матрица
rect.transform(m1);

Прямое управление коэффициентами матрицы

Для более точного управления элементом можно напрямую менять свойства матрицы:

var m = new Snap.Matrix();
m.a = 1.2; // масштаб по X
m.d = 0.8; // масштаб по Y
m.e = 100; // смещение X
m.f = 50;  // смещение Y
rect.transform(m);

Такой подход позволяет задавать нестандартные преобразования, которые невозможно выразить через стандартные методы translate, rotate или scale.

Сложные комбинации трансформаций

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

  • Каждое преобразование можно применять к уже существующей матрице, используя методы add() или multiply().
  • Порядок операций критичен: сначала масштаб, потом вращение, потом сдвиг — результат будет отличаться от другой последовательности.

Пример комплексной трансформации:

var m = new Snap.Matrix();
m.scale(1.5, 1.5, 100, 100);
m.rotate(30, 100, 100);
m.translate(50, 0);
rect.transform(m);

Здесь элемент сначала масштабируется относительно точки (100, 100), затем вращается вокруг той же точки, а потом сдвигается по X.

Инвертирование матриц и работа с обратными преобразованиями

Иногда необходимо вернуть элемент к исходному состоянию или вычислить обратное преобразование:

var m = new Snap.Matrix();
m.translate(50, 50).rotate(45);
var mInv = m.invert();
rect.transform(mInv);

Обратная матрица mInv возвращает элемент в исходное положение, что особенно полезно при динамических анимациях или интерактивных интерфейсах.

Получение информации о текущей матрице элемента

Метод getCTM() возвращает текущую матрицу трансформации элемента:

var currentMatrix = rect.transform().localMatrix;
console.log(currentMatrix.toString());
  • localMatrix — матрица, применяемая только к элементу
  • globalMatrix — матрица, учитывающая все родительские трансформации

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

Заключение по применению матриц

Пользовательские матрицы в Snap.svg дают полное управление трансформациями элементов. Они позволяют:

  • создавать сложные анимации
  • комбинировать сдвиги, вращения, масштабирование и наклоны
  • вычислять обратные преобразования
  • работать с глобальными и локальными координатами элементов

Использование Snap.Matrix делает код более гибким и точным, чем стандартные методы трансформации.

Оглавление