Трансформации групп

В Snap.svg для объединения нескольких элементов используется метод group(). Группа (<g> в SVG) позволяет применять трансформации ко всем вложенным объектам одновременно. Создание группы осуществляется следующим образом:

var s = Snap(800, 600);
var circle = s.circle(100, 100, 50);
var rect = s.rect(50, 50, 150, 100);
var group = s.group(circle, rect);

В этом примере создаются круг и прямоугольник, которые объединяются в одну группу. Любая трансформация, применённая к group, будет автоматически влиять на оба элемента.

Применение трансформаций к группам

Snap.svg поддерживает несколько типов трансформаций: перемещение (translate), масштабирование (scale), поворот (rotate), наклон (skew), а также комбинированные трансформации.

Перемещение группы

Метод transform принимает строку с набором команд. Для сдвига группы используется translate(x, y):

group.transform('translate(200, 150)');

Все элементы внутри группы смещаются на 200px по горизонтали и 150px по вертикали относительно исходного положения.

Масштабирование группы

Для масштабирования используется scale(sx, sy):

group.transform('scale(1.5, 1.5)');

Здесь sx — масштаб по горизонтали, sy — по вертикали. Если не указан sy, используется значение sx. Масштабирование происходит относительно точки (0, 0) группы, что можно изменить с помощью указания центра:

group.transform('scale(2, 2, 100, 100)');

Центр масштабирования установлен в точке (100, 100).

Поворот группы

Поворот выполняется командой rotate(angle, cx, cy):

group.transform('rotate(45, 150, 150)');

Группа поворачивается на 45° вокруг точки (150, 150). Если cx и cy не указаны, вращение происходит вокруг начала координат SVG.

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

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

group.transform('translate(100, 50) scale(1.5) rotate(30, 200, 200)');

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

Динамическое изменение трансформаций

Для изменения трансформаций после создания группы используется метод transform() с обновлением строки:

group.transform(group.transform().localMatrix.translate(50, 0));

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

Применение трансформаций к вложенным элементам

Трансформации группы затрагивают все элементы внутри. При этом элементы сохраняют свои собственные локальные трансформации. Пример:

var circle = s.circle(0, 0, 50).attr({fill: 'red'});
var rect = s.rect(-50, -25, 100, 50).attr({fill: 'blue'});
var group = s.group(circle, rect);
group.transform('translate(300, 200) rotate(30)');

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

Сложные анимации группы

Snap.svg позволяет анимировать трансформации групп через метод animate():

group.animate({ transform: 'translate(400, 300) rotate(360)' }, 2000, mina.easeinout);

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

Центрирование и относительные координаты

Для корректного позиционирования и поворота групп часто используют метод getBBox() для вычисления границ:

var bbox = group.getBBox();
group.transform(`rotate(45, ${bbox.cx}, ${bbox.cy})`);

bbox.cx и bbox.cy — центр группы, что позволяет вращать и масштабировать элементы вокруг их геометрического центра.

Итоговые рекомендации

  • Группы оптимизируют работу с множеством элементов, позволяя применять трансформации и анимации централизованно.
  • Локальные трансформации элементов сохраняются, что позволяет комбинировать индивидуальные эффекты с групповыми.
  • Комбинированные трансформации важны для сложных композиций, порядок операций напрямую влияет на результат.
  • Методы getBBox() и localMatrix помогают управлять точками вращения и динамически изменять трансформации, обеспечивая точное позиционирование и анимацию.

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

Оглавление