Управление дочерними элементами

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

Добавление дочерних элементов

Для добавления дочернего объекта используется метод add() экземпляра Two.Group или другого объекта сцены. Простейший пример:

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

group.add(circle, rectangle);
  • group – объект, который выступает родителем.
  • circle и rectangle автоматически становятся дочерними элементами группы.

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

Доступ к дочерним элементам

Свойство children группы хранит массив всех дочерних объектов. Через него можно получать доступ к отдельным элементам:

console.log(group.children[0]); // circle
console.log(group.children[1]); // rectangle

Массив children является живым: изменения в нём отражаются на иерархии сцены.

Удаление дочерних элементов

Для удаления дочернего элемента используется метод remove():

group.remove(circle);

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

Метод remove() можно применять к нескольким объектам одновременно:

group.remove(rectangle, circle);

Управление трансформациями

Дочерние элементы наследуют трансформации родителя. Если у группы изменяются позиция, масштаб или вращение, все дочерние объекты автоматически изменяют свои координаты:

group.translation.set(200, 150);
group.rotation = Math.PI / 4;
group.scale = 1.5;
  • translation – смещение всей группы.
  • rotation – поворот всей группы вокруг её центра.
  • scale – масштабирование всей группы.

Важно понимать, что локальные трансформации дочернего элемента применяются после трансформаций родителя. Например, если у круга есть своя позиция (50, 0) внутри группы, после смещения группы на (200, 150) итоговое положение круга будет (250, 150).

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

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

const innerGroup = two.makeGroup();
const innerCircle = two.makeCircle(0, 0, 30);

innerGroup.add(innerCircle);
group.add(innerGroup);

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

Перебор и поиск дочерних элементов

Для перебора всех дочерних объектов используют стандартный цикл forEach:

group.children.forEach(child => {
  child.opacity = 0.5; // изменяем прозрачность всех дочерних элементов
});

Для поиска по имени или типу удобно использовать фильтрацию:

const circles = group.children.filter(c => c.type === 'circle');

Каждый объект имеет свойство type, которое указывает на его геометрическую форму: 'circle', 'rectangle', 'path' и т.д.

Свойства, специфичные для дочерних элементов

  • visible – определяет, отображается ли объект.
  • opacity – прозрачность элемента, умножается на прозрачность родителя.
  • stroke и fill – цветовые свойства, задаваемые локально, но визуально комбинируются с глобальными эффектами родителя.

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

Анимация дочерних объектов

Дочерние элементы анимируются через стандартный метод two.bind('update', callback) или через внешние библиотеки анимации. Поскольку дочерние объекты наследуют трансформации родителя, достаточно анимировать родителя, чтобы управлять группой целиком:

two.bind('update', function(frameCount) {
  group.rotation += 0.01;
});

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

Итоговая структура

Правильная организация дочерних элементов позволяет:

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

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

Оглавление