Перемещение между группами

В библиотеке SVG.js группировка элементов осуществляется с помощью метода group(). Группа позволяет объединять несколько графических объектов для совместного управления ими: перемещения, трансформаций, анимаций и изменения атрибутов. Это упрощает организацию сложных графических сцен и позволяет структурировать код.

const draw = SVG().addTo('body').size(600, 400);

// Создание группы
const group = draw.group();

// Добавление элементов в группу
const rect = group.rect(100, 50).fill('blue');
const circle = group.circle(50).fill('red').move(120, 0);

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

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

Для перемещения группы используется метод move(x, y) или translate(dx, dy).

  • move(x, y) задает абсолютные координаты верхнего левого угла группы.
  • translate(dx, dy) сдвигает группу на относительное расстояние dx, dy от текущего положения.
// Абсолютное перемещение
group.move(50, 100);

// Относительное перемещение
group.translate(30, 20);

Важно: при перемещении группы внутренние элементы сохраняют свои координаты относительно группы, что упрощает работу с комплексными объектами.

Вложенные группы

Группы могут содержать другие группы, что позволяет создавать иерархические структуры:

const subGroup = draw.group();
subGroup.rect(40, 40).fill('green');
group.add(subGroup);

// Перемещение внешней группы перемещает все внутренние элементы
group.move(200, 50);

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

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

Методы rotate, scale и skew применяются к группе и влияют на все элементы внутри:

group.rotate(45);    // Поворот всей группы на 45 градусов
group.scale(1.5);    // Увеличение размера группы на 50%

Для поворота или масштабирования относительно конкретной точки можно использовать вторые параметры:

group.rotate(30, 100, 100); // Поворот относительно точки (100, 100)
group.scale(2, 0, 0);       // Масштабирование относительно координат (0, 0)

Перемещение элементов между группами

SVG.js позволяет динамически перемещать элементы из одной группы в другую через метод addTo():

const groupA = draw.group();
const groupB = draw.group();

const circle = groupA.circle(50).fill('orange');

// Перемещаем элемент в другую группу
circle.addTo(groupB);

После этого элемент circle станет частью groupB. Любые трансформации или атрибуты группы B будут применяться к нему. При этом элемент автоматически удаляется из исходной группы.

Важные особенности

  1. Позиционирование после перемещения: перемещение элемента между группами не изменяет его глобальные координаты. SVG.js сохраняет визуальное положение элемента на холсте.
  2. Свойства трансформации: если у родительской группы были трансформации, перемещаемый элемент будет воспринимать трансформации новой группы поверх старых.
  3. Манипуляции с DOM: группа — это обычный SVG <g> элемент, поэтому все стандартные методы работы с DOM, включая append и remove, также совместимы с SVG.js.

Практическое применение

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

Метод children() и работа с элементами внутри группы

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

group.children().forEach(el => {
    el.fill('purple'); // Применяем цвет ко всем элементам группы
});

Это позволяет изменять атрибуты или трансформации отдельных объектов без разрушения структуры группы.

Резюме по перемещению между группами

  • Используется метод addTo(targetGroup) для перемещения элементов.
  • Координаты визуально сохраняются, но элемент начинает наследовать трансформации новой группы.
  • Вложенные группы иерархически наследуют трансформации родителей, что важно учитывать при сложных сценах.
  • Методы move, translate, rotate, scale позволяют управлять группами как единым объектом.

Перемещение элементов между группами в SVG.js — мощный инструмент для структурирования и динамической работы с графикой.

Оглавление