Создание групп объектов

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

Объект Group создается с помощью конструктора Two.Group() и может содержать любые примитивные объекты Two.js — фигуры, линии, изображения или даже другие группы, создавая иерархическую структуру сцены.

const group = new Two.Group();

Группы можно добавлять на сцену через метод two.add(group):

two.add(group);

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

Добавление объектов в группу

Для добавления объектов используется метод group.add(object). Объект может быть любым примитивом Two.js:

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

group.add(circle, rectangle);

Внутри группы координаты объектов являются локальными относительно группы. Например, circle с координатами (0,0) будет находиться в центре группы, а rectangle с координатами (100,0) — на 100 пикселей правее центра группы.

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

Позиция

Группа имеет свойства translation.x и translation.y, которые задают смещение всей группы на сцене:

group.translation.set(200, 150);

После этого все объекты в группе сместятся на (200, 150) относительно исходной позиции сцены.

Масштаб

Масштаб группы изменяется через свойство scale. Можно установить общий масштаб или масштаб по отдельным осям:

group.scale = 2; // общий масштаб
group.scaleX = 1.5; // масштаб по оси X
group.scaleY = 0.5; // масштаб по оси Y

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

Вращение

Свойство rotation позволяет поворачивать всю группу вокруг её локального центра:

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

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

Иерархия групп

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

const innerGroup = new Two.Group();
innerGroup.add(two.makeCircle(0, 0, 30));
group.add(innerGroup);

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

Управление прозрачностью и видимостью

Свойства opacity и visible применяются ко всей группе:

group.opacity = 0.5; // полупрозрачность
group.visible = false; // скрыть группу

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

Анимация групп

Two.js позволяет анимировать группы через изменение их свойств в цикле рендеринга:

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

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

Применение методов remove и clear

Группы поддерживают удаление объектов через метод remove(object):

group.remove(circle);

Метод clear() полностью очищает группу от всех дочерних элементов:

group.clear();

Удаление объектов из группы не удаляет их с сцены, если они были добавлены напрямую. Для полного удаления нужно использовать метод two.remove(object).

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

Доступ к объектам внутри группы осуществляется через массив children:

group.children.forEach(child => {
    child.fill = '#FF0000';
});

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

Практическая структура сцены с группами

Пример организации сцены с несколькими группами:

const sun = two.makeCircle(0, 0, 50);
const earth = two.makeCircle(100, 0, 20);
const moon = two.makeCircle(130, 0, 5);

const earthGroup = new Two.Group();
earthGroup.add(earth, moon);

const solarSystem = new Two.Group();
solarSystem.add(sun, earthGroup);

two.add(solarSystem);

two.bind('update', function(frameCount) {
    earthGroup.rotation += 0.02;
    solarSystem.rotation += 0.001;
}).play();

В этом примере создается простая модель солнечной системы. Земля и Луна вращаются вокруг общей оси группы earthGroup, а вся система медленно вращается вместе с Солнцем. Использование групп упрощает управление сложными взаимосвязанными объектами и делает анимацию интуитивной.

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

Оглавление