Проверка иерархии объектов

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

Ключевые объекты и группы

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

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

let group = two.makeGroup();
let circle = two.makeCircle(0, 0, 50);
let rect = two.makeRectangle(100, 100, 80, 40);

group.add(circle, rect);
two.add(group);

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

Проверка принадлежности объекта к группе

Чтобы убедиться, что объект находится внутри группы, используется свойство parent. Оно указывает на родительский объект в иерархии.

console.log(circle.parent === group); // true

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

Методы проверки дочерних элементов:

  • group.children — массив всех объектов внутри группы.
  • group.children.includes(obj) — проверка, находится ли конкретный объект в данной группе.
console.log(group.children.includes(circle)); // true

Вложенные группы и рекурсивная проверка

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

function isDescendant(obj, ancestor) {
    let current = obj.parent;
    while (current) {
        if (current === ancestor) return true;
        current = current.parent;
    }
    return false;
}

let subGroup = two.makeGroup();
subGroup.add(circle);
group.add(subGroup);

console.log(isDescendant(circle, group)); // true

Рекурсивная проверка позволяет работать с глубоко вложенными объектами и гарантировать правильное управление сценой.

Трансформации и наследование

Все трансформации (позиция, масштаб, вращение) у объектов в Two.js наследуются от родителя:

  • Позиция (translation) — дочерний объект смещается относительно координат родителя.
  • Масштаб (scale) — увеличивает или уменьшает объект вместе с группой.
  • Вращение (rotation) — поворот родителя применяется ко всем дочерним элементам.
group.translation.set(200, 100);
group.scale = 2;
group.rotation = Math.PI / 4;

После применения этих трансформаций circle и rect автоматически перемещаются и масштабируются в соответствии с изменениями родителя.

Удаление объектов и проверка иерархии

Удаление объекта из группы не только убирает его с визуальной сцены, но и разрывает связь в иерархии:

group.remove(circle);
console.log(circle.parent); // null
console.log(group.children.includes(circle)); // false

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

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

  • Всегда использовать parent для определения принадлежности объекта.
  • Для сложных структур применять рекурсивную проверку, чтобы отслеживать вложенность.
  • Использовать children группы для быстрого перебора и управления объектами.
  • Трансформации родителя автоматически распространяются на всех потомков, что облегчает управление сценой.

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

Оглавление