Two.Group и методы групп

Two.Group в библиотеке Two.js представляет собой контейнер для объединения нескольких графических объектов в одну логическую единицу. Группы позволяют управлять свойствами сразу всех элементов, входящих в неё: позиционированием, масштабом, вращением, прозрачностью, видимостью и другими атрибутами.

Создание группы выполняется через конструктор Two.Group() или через метод add() на существующем экземпляре Two.

const group = new Two.Group();
two.add(group);

Группы могут содержать любые объекты Two.js: Two.Circle, Two.Rectangle, Two.Path, другие Two.Group.

Добавление и удаление элементов

Для добавления объектов в группу используется метод add():

const circle = two.makeCircle(0, 0, 50);
const rectangle = two.makeRectangle(100, 100, 80, 60);

group.add(circle, rectangle);

Удаление элементов выполняется через метод remove():

group.remove(circle);

Метод add() поддерживает передачу нескольких объектов сразу, а remove() – одиночных объектов или массивов.

Свойства группы

Позиция

Группа имеет свойства translation.x и translation.y, определяющие её положение на холсте.

group.translation.set(200, 150);

Изменение позиции группы перемещает все её дочерние элементы относительно новой точки.

Масштаб

Свойство scale управляет масштабированием группы:

group.scale = 1.5; // Увеличение на 50%

Также можно использовать scaleX и scaleY для отдельных осей:

group.scaleX = 2;
group.scaleY = 0.5;

Вращение

Свойство rotation задаёт угол вращения группы в радианах:

group.rotation = Math.PI / 4; // 45 градусов

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

Прозрачность и видимость

opacity и visible позволяют управлять прозрачностью и отображением группы:

group.opacity = 0.7;
group.visible = false;

Эти свойства наследуются всеми объектами внутри группы.

Происхождение (Origin)

Свойство group.origin определяет точку, вокруг которой выполняются трансформации (масштабирование и вращение).

group.origin.set(50, 50);

Методы групп для манипуляции

add() / remove()

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

clear()

Удаляет все дочерние элементы группы, оставляя её пустой:

group.clear();

clone()

Создаёт копию группы с копиями всех её объектов. Параметр deep определяет, будет ли клон глубоким (с отдельными экземплярами объектов) или поверхностным:

const groupClone = group.clone(true);

center()

Выравнивает группу по центру холста или родительской группы:

group.center();

addTo()

Добавляет группу в другой объект Two или в другую группу:

group.addTo(anotherGroup);

Анимация свойств группы

Динамическое изменение свойств translation, rotation, scale и opacity возможно через метод Two.Tween или циклы requestAnimationFrame:

two.bind('update', function(frameCount) {
  group.rotation += 0.01;
  group.translation.x = 100 + Math.sin(frameCount * 0.05) * 50;
}).play();

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

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

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

const parentGroup = new Two.Group();
const childGroup = new Two.Group();
parentGroup.add(childGroup);

childGroup.add(two.makeCircle(0, 0, 30));
parentGroup.rotation = Math.PI / 6; // Вращает всю иерархию

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

Обработка событий

Хотя Two.Group не обрабатывает события напрямую, дочерние объекты сохраняют возможность реагировать на события мыши или касания. Для групп часто применяют обход дочерних элементов и применение изменений через итерации:

group.children.forEach(function(child) {
  child.fill = 'red';
});

Это позволяет массово менять стиль элементов без необходимости изменять их по отдельности.

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

  • Группы — основной инструмент для организации сцены и управления множеством объектов.
  • Использование вложенных групп упрощает создание сложных анимаций.
  • Трансформации группы применяются к всем дочерним элементам, что позволяет легко масштабировать, вращать или перемещать целые блоки объектов.
  • Методы clone, clear и addTo повышают гибкость управления сценой.

Грамотное использование Two.Group значительно упрощает работу с графикой в Two.js и делает код структурированным и управляемым.

Оглавление