Глобальные и локальные трансформации

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

Локальные трансформации

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

  • translate(x, y) – смещение объекта по оси X и Y относительно текущего положения.
  • rotate(angle, cx, cy) – поворот объекта вокруг заданной точки (cx, cy). Если координаты не указаны, поворот осуществляется вокруг текущего центра объекта.
  • scale(sx, sy, cx, cy) – масштабирование по осям X и Y относительно точки (cx, cy).
  • skewX(angle), skewY(angle) – искажение объекта по оси X или Y.

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

var s = Snap("#svg");
var rect = s.rect(50, 50, 100, 50);
rect.transform('t50,50r45');

В этом примере t50,50 смещает прямоугольник на 50 пикселей по обеим осям, а r45 поворачивает его на 45 градусов относительно центра прямоугольника после смещения. Порядок трансформаций важен: сначала применяется смещение, затем поворот.

Особенности локальных трансформаций:

  • Локальные трансформации не меняют координаты сцены, они воздействуют только на объект.
  • При множественных трансформациях их порядок определяет конечный результат.
  • Можно использовать цепочку transform для комбинирования нескольких трансформаций, например: 't20,30r30s2,2'.

Глобальные трансформации

Глобальная трансформация влияет на объект с учётом всей сцены. Она применяется относительно исходной системы координат SVG или родительских элементов, объединяя эффекты всех предыдущих трансформаций.

Основные методы глобальной трансформации:

  • getBBox() – возвращает ограничивающий прямоугольник объекта в глобальных координатах.
  • matrix() – позволяет напрямую управлять матрицей трансформации объекта.
  • transform() с матрицей – глобальная манипуляция через Snap.Matrix.

Пример глобальной трансформации через матрицу:

var s = Snap("#svg");
var circle = s.circle(100, 100, 50);
var m = new Snap.Matrix();
m.translate(100, 50);
m.rotate(30);
circle.transform(m);

Здесь матрица сначала смещает окружность на (100,50), а затем поворачивает на 30 градусов относительно глобальной системы координат. В отличие от локальной трансформации, такие изменения учитывают положение объекта на всей сцене и влияют на взаимодействие с другими элементами.

Преобразование между локальными и глобальными координатами

Snap.svg предоставляет инструменты для конверсии координат:

  • getCTM() – возвращает текущую матрицу трансформации объекта относительно глобальной системы координат.
  • getScreenCTM() – возвращает матрицу трансформации относительно окна браузера, полезно при взаимодействии с мышью или сенсорными событиями.
  • toLocalPoint(x, y) и toGlobalPoint(x, y) – методы для перевода координат между локальной и глобальной системами координат.

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

var s = Snap("#svg");
var ellipse = s.ellipse(150, 100, 80, 40);
ellipse.transform('r45');
var ctm = ellipse.getCTM();
var globalPoint = ctm.transformPoint({x: 150, y: 100});
console.log(globalPoint);

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

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

В Snap.svg каждая трансформация может быть представлена через матрицу 2D аффинного преобразования. Матрица имеет вид:

[ ]

Где:

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

Пример использования матрицы для комбинированной трансформации:

var m = new Snap.Matrix();
m.scale(1.5, 1.5, 50, 50); // Масштабирование относительно точки (50,50)
m.rotate(30, 50, 50);       // Поворот относительно той же точки
rect.transform(m);

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

Анимация трансформаций

Snap.svg поддерживает анимацию локальных и глобальных трансформаций через метод animate(). Можно анимировать отдельные параметры, комбинировать трансформации и задавать длительность и функцию интерполяции.

Пример анимации:

rect.animate({ transform: 't100,0r90' }, 2000, mina.easeinout);

Этот код перемещает прямоугольник на 100 пикселей по X и поворачивает на 90 градусов за 2 секунды, используя плавное ускорение и замедление. Snap.svg корректно комбинирует локальные и глобальные трансформации при анимации.

Взаимодействие локальных и глобальных трансформаций

  • Локальные трансформации применяются к объекту относительно его текущего состояния.
  • Глобальные трансформации учитывают все родительские преобразования и систему координат сцены.
  • Для сложных композиций часто комбинируют оба подхода: локальные для анимации и позиционирования объекта, глобальные для интеграции в сцену или взаимодействия с другими элементами.

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

Оглавление