Изоляция и наследование свойств

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

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // или Two.Types.canvas, Two.Types.webgl
}).appendTo(document.body);

Ключевые параметры:

  • width и height задают размеры холста.
  • type определяет рендерер: SVG, Canvas или WebGL.
  • domElement – элемент, в который будет вставлен холст (обычно body или конкретный div).

Экземпляр Two.js создаёт область, в которой размещаются все объекты. Все объекты наследуют базовые свойства от родителя, если они не переопределены локально.

Группы и иерархия объектов

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

const group = two.makeGroup();
const circle = two.makeCircle(100, 100, 50);
const rect = two.makeRectangle(150, 150, 80, 50);

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

Особенности наследования в группах:

  • Положение (translation) группы влияет на все дочерние объекты.
  • Поворот (rotation) и масштаб (scale) группы применяются ко всем элементам внутри.
  • Локальные свойства объектов могут переопределять свойства группы. Например, если группа имеет fill = 'red', а круг внутри fill = 'blue', круг будет синим.

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

Наследование свойств и локальные изменения

Каждый объект Two.js имеет набор базовых свойств: translation, rotation, scale, fill, stroke, linewidth, opacity. Свойства объекта могут быть:

  • Наследуемыми: автоматически применяются от родителя (например, группа или сценический объект).
  • Локальными: переопределяют свойства родителя.

Пример наследования и локальной настройки:

const parentGroup = two.makeGroup();
parentGroup.translation.set(200, 200);
parentGroup.fill = 'green';

const childCircle = two.makeCircle(0, 0, 40);
childCircle.fill = 'yellow'; // Локальное переопределение

parentGroup.add(childCircle);
two.add(parentGroup);

Здесь группа задаёт смещение и цвет по умолчанию. Круг получает позицию от группы, но цвет переопределяется локально.

Правило: Локальные свойства всегда имеют приоритет над унаследованными.

Свойства трансформации: перевод, масштаб и вращение

Two.js позволяет гибко управлять объектами через трансформации:

  • translation – смещение объекта относительно родителя.
  • scale – масштаб объекта; может быть отдельным по осям (scale.x, scale.y).
  • rotation – поворот объекта в радианах.

Наследование трансформаций работает рекурсивно: все дочерние элементы получают трансформации родителя и складывают их с локальными.

const group = two.makeGroup();
group.translation.set(100, 100);
group.rotation = Math.PI / 4;

const rect = two.makeRectangle(0, 0, 50, 50);
group.add(rect);

two.add(group);

Результат: прямоугольник повернётся на 45 градусов относительно сцены, но его координаты остаются локальными внутри группы.

Изоляция визуальных свойств

Для управления визуальными аспектами объектов (цвет, прозрачность, линия) используется принцип изоляции:

  • Свойства объекта не затрагивают родителя.
  • Свойства родителя распространяются на объект только если локально не определены.

Пример:

const parent = two.makeGroup();
parent.opacity = 0.5;

const child1 = two.makeCircle(0, 0, 30); // наследует opacity 0.5
const child2 = two.makeCircle(60, 0, 30);
child2.opacity = 1; // локально переопределено

parent.add(child1, child2);
two.add(parent);

Результат: первый круг полупрозрачный, второй – полностью непрозрачный.

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

Механизм слоёв и порядок отображения

Two.js применяет порядок отрисовки по добавлению объектов в сцену. Группы могут содержать слои, управлять z-порядком через последовательность добавления:

const group = two.makeGroup();
const circle1 = two.makeCircle(0, 0, 40);
const circle2 = two.makeCircle(10, 10, 40);

group.add(circle1);
group.add(circle2); // отображается поверх circle1

two.add(group);

Для динамического изменения слоя используется метод bringToFront или sendToBack:

circle1.bringToFront();

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

События и изоляция взаимодействий

Two.js поддерживает базовую систему событий через интеграцию с DOM или Canvas. Важный принцип – объект реагирует на события независимо от родителя, если не указано иное:

circle2._renderer.elem.addEventListener('click', () => {
  circle2.fill = 'red'; // локальное изменение
});

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

Практическая рекомендация по структуре сцен

  1. Использовать группы для логической изоляции: отдельные элементы интерфейса, персонажи или слои.
  2. Применять наследование только для общих свойств: цвет, прозрачность, масштаб.
  3. Локальное переопределение для индивидуальных особенностей объектов.
  4. Тщательно управлять порядком добавления объектов для контроля визуального слоя.
  5. Разделять трансформации и стили: трансформации наследуются рекурсивно, стили можно изолировать.

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

Оглавление