Методы Matrix

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

Создать матрицу можно несколькими способами:

// Пустая матрица (единичная)
var m = new Snap.Matrix();

// Матрица с заданными коэффициентами
var m2 = new Snap.Matrix(a, b, c, d, e, f);

Где коэффициенты a, b, c, d, e, f соответствуют стандартной 3x3 матрице аффинного преобразования:

| a c e |
| b d f |
| 0 0 1 |

Эта матрица преобразует координаты точки (x, y) по формуле:

x' = a*x + c*y + e
y' = b*x + d*y + f

Методы для трансформаций

Перемещение (translate)

Метод translate(dx, dy) сдвигает элемент на заданные значения по осям X и Y.

var m = new Snap.Matrix();
m.translate(50, 100);

После этого точка (x, y) будет преобразована в (x + 50, y + 100).

Можно комбинировать перемещения:

m.translate(20, 0); // добавляется к предыдущему смещению

Масштабирование (scale)

Метод scale(sx, sy, cx, cy) изменяет размеры объекта. Параметры cx и cy задают точку, относительно которой выполняется масштабирование (по умолчанию центр (0, 0)).

m.scale(2, 2); // удвоение размеров относительно начала координат
m.scale(0.5, 0.5, 100, 100); // масштабирование относительно точки (100, 100)

При масштабировании координаты точек изменяются по формулам:

x' = sx*(x - cx) + cx
y' = sy*(y - cy) + cy

Вращение (rotate)

Метод rotate(angle, cx, cy) выполняет вращение на угол angle градусов вокруг точки (cx, cy). Если центр не указан, используется (0,0).

m.rotate(45); // вращение на 45° относительно начала координат
m.rotate(30, 50, 50); // вращение вокруг точки (50,50)

Внутренне применяется стандартная матрица вращения:

| cosθ -sinθ 0 |
| sinθ  cosθ 0 |
| 0     0    1 |

С учётом смещения центра (cx, cy) выполняется перенос к центру, вращение и обратный перенос.

Наклон (skewX и skewY)

Методы skewX(angle) и skewY(angle) создают геометрическое искажение по соответствующей оси. Угол задаётся в градусах.

m.skewX(30); // наклон по оси X
m.skewY(15); // наклон по оси Y

Матрицы наклона:

skewX(α):
| 1 tanα 0 |
| 0 1    0 |
| 0 0    1 |

skewY(α):
| 1 0    0 |
| tanα 1 0 |
| 0 0    1 |

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

Метод add(matrix) позволяет соединять преобразования. Результирующая матрица применяется к элементу как последовательность всех операций.

var m1 = new Snap.Matrix().translate(50, 50);
var m2 = new Snap.Matrix().rotate(30);
m1.add(m2); // сначала смещение, потом вращение

Важно помнить, что порядок операций имеет значение, так как матрицы не коммутируют.

Метод invert() создаёт обратную матрицу, которая отменяет все преобразования:

var inv = m1.invert();

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

Применить матрицу к элементу можно через метод transform:

var circle = s.circle(100, 100, 50); // s — объект Snap
circle.transform(m); // применяет матрицу

Также поддерживаются строки трансформаций:

circle.transform("t50,50r45s2,2");

Snap.svg конвертирует такие строки в объект Matrix для внутренних вычислений.

Полезные методы объекта Matrix

  • toTransformString() — возвращает строку в формате "t... r... s...", пригодную для transform.
  • clone() — создаёт копию матрицы, позволяя безопасно манипулировать.
  • offset(x, y) — добавляет смещение к текущей матрице.
  • split() — возвращает объект с разложением матрицы на составляющие: sx, sy, rotate, shear, dx, dy.
var parts = m.split();
console.log(parts.sx, parts.sy, parts.rotate, parts.dx, parts.dy);

Это удобно для анимации, когда требуется изменять только один параметр (например, угол вращения) без потери остальных трансформаций.

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

  1. Создать объект Matrix.
  2. Применить необходимые трансформации: translate, scale, rotate, skewX/Y.
  3. При необходимости объединить с другими матрицами через add.
  4. Использовать invert для обратных преобразований.
  5. Применить матрицу к элементу через transform.

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

Оглавление