Group и группировка объектов

В Paper.js объекты на холсте могут быть сгруппированы с помощью класса Group. Это позволяет объединять несколько элементов в один логический блок, управлять ими как единым объектом, перемещать, трансформировать и изменять их свойства одновременно.

Создание группы

Группу можно создать двумя способами:

Через конструктор с массивом элементов:

var circle = new Path.Circle({
    center: [50, 50],
    radius: 30,
    fillColor: 'red'
});

var rectangle = new Path.Rectangle({
    point: [70, 70],
    size: [60, 40],
    fillColor: 'blue'
});

var group = new Group([circle, rectangle]);

В этом примере circle и rectangle становятся частью одной группы. Любое перемещение group.position смещает оба объекта одновременно.

Создание пустой группы и добавление элементов позже:

var group = new Group();
group.addChild(circle);
group.addChild(rectangle);

Метод addChild добавляет элемент в группу, сохраняя его относительное положение.

Основные свойства группы

position – координаты центра группы. Изменение сдвигает все дочерние объекты.
bounds – прямоугольная область, охватывающая все элементы группы.
children – массив всех элементов внутри группы.
visible – управляет видимостью всех объектов в группе одновременно.
opacity – задаёт прозрачность для всей группы.

group.position = new Point(200, 200);
group.opacity = 0.5;
group.visible = true;

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

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

var innerGroup = new Group([circle]);
var outerGroup = new Group([innerGroup, rectangle]);

Любое действие над outerGroup влияет на innerGroup и все его дочерние элементы. При этом дочерние группы сохраняют свои локальные координаты относительно родительской группы.

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

Группы наследуют методы трансформации от объектов Paper.js:

translate(offset) – перемещает группу на заданное смещение.
rotate(angle, center) – вращает группу вокруг указанной точки.
scale(factor, center) – масштабирует группу по оси или в целом.
remove() – удаляет группу и все её дочерние элементы с холста.

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

Работа с дочерними элементами

Доступ к отдельным объектам:

var firstChild = group.children[0];
firstChild.fillColor = 'green';

Удаление элемента из группы:

group.removeChild(rectangle);

Проверка количества объектов:

console.log(group.children.length);

Иерархия и координаты

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

console.log(circle.position); // Локальная позиция относительно группы
console.log(circle.globalToLocal(new Point(200, 200))); // Преобразование в локальные координаты

Особенности рендеринга

Свойства группы, такие как opacity, blendMode и visible, влияют на все дочерние объекты.
Свойства дочерних объектов могут переопределять свойства группы в некоторых случаях, например, цвет заливки.

События и группы

События мыши и клика могут быть назначены на группы:

group.onCl ick = function(event) {
    this.scale(1.2);
};

При этом событие срабатывает при клике на любой дочерний элемент группы. Для определения конкретного объекта используется event.target.

Использование групп для анимации

Группы особенно полезны для анимации, так как позволяют изменять положение, масштаб или вращение множества объектов одновременно:

function onFrame(event) {
    group.rotate(1); // Плавное вращение группы
    group.position.x += 2; // Смещение вправо
}