Матрицы трансформации

Snap.svg предоставляет мощный инструмент для работы с графикой через SVG, где важную роль играют трансформации объектов. Одним из ключевых механизмов управления трансформацией является использование матриц трансформации, которые позволяют изменять положение, масштаб, вращение и наклон объектов комплексно и точно.

Понятие матрицы трансформации

В Snap.svg матрица трансформации представляет собой объект Snap.Matrix, который хранит параметры аффинного преобразования в виде шести чисел:

[a, b, c, d, e, f]

где:

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

Математически матрица преобразования выглядит так:

[ ]

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

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

Создание новой матрицы:

var matrix = new Snap.Matrix();

По умолчанию она является единичной, то есть не изменяет объект.

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

var circle = s.circle(100, 100, 50);
circle.transform(matrix);

Метод transform() принимает строку трансформации или объект матрицы. Если передан объект Snap.Matrix, Snap.svg автоматически применяет преобразование.

Трансформации с использованием методов матрицы

Snap.Matrix предоставляет ряд методов для изменения матрицы:

  • translate(x, y) — смещение объекта по осям X и Y:
matrix.translate(50, 30);
circle.transform(matrix);
  • scale(sx, sy, cx, cy) — масштабирование объекта относительно точки (cx, cy):
matrix.scale(2, 1.5, 100, 100);
circle.transform(matrix);
  • rotate(angle, cx, cy) — вращение на угол angle вокруг точки (cx, cy):
matrix.rotate(45, 100, 100);
circle.transform(matrix);
  • skewX(angle), skewY(angle) — наклон по горизонтали или вертикали:
matrix.skewX(20);
matrix.skewY(-15);
circle.transform(matrix);

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

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

Одним из мощных инструментов является объединение матриц с помощью метода add():

var m1 = new Snap.Matrix();
var m2 = new Snap.Matrix();
m1.translate(50, 50);
m2.rotate(30);

m1.add(m2);
circle.transform(m1);

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

Получение текущей матрицы объекта

Для анализа текущей трансформации объекта используется метод matrix:

var currentMatrix = circle.matrix;
console.log(currentMatrix.toString());

Метод toString() возвращает строку формата matrix(a,b,c,d,e,f), которую можно использовать напрямую в transform() или для экспорта.

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

  1. Поворот вокруг центра объекта:
var rect = s.rect(50, 50, 100, 50);
var bbox = rect.getBBox();
var m = new Snap.Matrix();
m.rotate(45, bbox.cx, bbox.cy);
rect.transform(m);
  1. Комбинация смещения, масштабирования и наклона:
var ellipse = s.ellipse(200, 200, 80, 40);
var m = new Snap.Matrix();
m.translate(30, -20);
m.scale(1.5, 0.8, 200, 200);
m.skewX(15);
ellipse.transform(m);
  1. Анимация с матрицей:
var star = s.polygon([0,0, 50,100, 100,0]);
var m = new Snap.Matrix();
star.animate({ transform: m.rotate(360, 50, 50) }, 2000);

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

Преимущества использования Snap.Matrix

  • Контроль над последовательностью трансформаций — позволяет избежать неожиданных эффектов при комбинации translate, rotate и scale.
  • Универсальность — одна матрица заменяет несколько отдельных операций.
  • Интеграция с анимацией — матрицы легко использовать в методах animate, что открывает возможности для сложных анимационных эффектов.
  • Сохранение и восстановление состояния — текущая матрица объекта может быть сохранена и применена повторно, что упрощает динамическую графику.
Оглавление