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

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

const group = two.makeGroup();

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

const circle = two.makeCircle(50, 50, 30);
const rect = two.makeRectangle(100, 100, 80, 40);
group.add(circle, rect);

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

Группы наследуют те же трансформационные свойства, что и отдельные объекты: translation, rotation, scale. Эти свойства применяются ко всем дочерним элементам одновременно.

Позиция группы (translation)

Свойство translation задаёт смещение группы по осям X и Y. Все объекты внутри группы перемещаются синхронно.

group.translation.set(200, 150);

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

Вращение группы (rotation)

Свойство rotation задаёт угол поворота группы в радианах. Поворот происходит вокруг центра группы.

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

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

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

Масштабирование группы производится с помощью свойства scale. Оно может быть числом (одинаковое по X и Y) или вектором { x, y }.

group.scale = 1.5;           // общий масштаб
group.scale = { x: 2, y: 0.5 }; // масштаб по отдельным осям

Масштаб применяется ко всем объектам внутри группы относительно центра группы.

Иерархия и вложенные группы

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

const subgroup = two.makeGroup();
subgroup.add(two.makeCircle(0, 0, 20));
group.add(subgroup);

group.translation.set(100, 100);

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

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

Two.js поддерживает плавные анимации через метод two.update(). Для анимации трансформаций групп можно изменять их свойства в цикле requestAnimationFrame.

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

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

Прозрачность и стиль группы

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

group.opacity = 0.5;

Стиль заливки и обводки по умолчанию наследуется от дочерних элементов, но можно использовать метод children для массового изменения стиля:

group.children.forEach(child => {
  child.fill = '#3498db';
  child.stroke = '#2c3e50';
});

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

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

group.remove(circle);

Если объект больше не нужен, его можно полностью удалить:

two.remove(circle);

Взаимодействие с событиями

События, такие как click или mouseover, можно назначать как отдельным объектам внутри группы, так и группе целиком. Two.js передаёт события к объектам в порядке их иерархии.

group._renderer.elem.addEventListener('click', () => {
  group.rotation += Math.PI / 8;
});

Итоговые рекомендации по трансформациям групп

  • Всегда учитывать центр группы (group.translation) при вращении и масштабировании.
  • Для сложных сцен использовать вложенные группы, чтобы управлять объектами модульно.
  • Применение анимации на уровне группы упрощает код и уменьшает количество вычислений.
  • Массовое изменение стилей через children позволяет единообразно стилизовать все элементы группы.

Трансформации групп делают управление множеством объектов в Two.js эффективным и позволяют создавать сложные композиции без необходимости индивидуального управления каждым элементом.

Оглавление