Иерархия объектов

Paper.js организует все элементы сцены в виде иерархии объектов, что позволяет управлять сложными графическими композициями эффективно и логично. Основой этой системы является объект Project, содержащий Layer, а в слоях размещаются Item — базовый класс для всех визуальных объектов.

Project и его роль

Каждый проект (Project) представляет собой отдельный холст, на котором выполняются все графические операции. Внутри проекта существует массив слоев (layers), а также активный слой (activeLayer), который используется по умолчанию при создании новых объектов. Проекты могут существовать одновременно в рамках одного документа, что позволяет разделять графику на независимые области работы.

let project = new Project();
console.log(project.layers); // массив слоев
console.log(project.activeLayer); // текущий активный слой

Слои (Layer) и порядок отображения

Слой является контейнером для объектов (Item) и определяет их порядок отображения. Все объекты, добавленные в слой, рендерятся поверх объектов нижележащих слоев. Layer наследует от Item, поэтому слои можно перемещать, масштабировать или вращать как единый объект.

  • Добавление объектов в слой: по умолчанию объекты добавляются в activeLayer.
  • Свойства слоя: opacity, visible, blendMode.
  • Методы управления: addChild(item), removeChildren(), bringToFront(), sendToBack().
let layer1 = new Layer();
let circle = new Path.Circle(new Point(100, 100), 50);
layer1.addChild(circle);
layer1.opacity = 0.5;

Базовый класс Item

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

Основные свойства:

  • position — координаты центра объекта.
  • rotation — угол поворота в градусах.
  • scale — масштаб объекта.
  • visible — видимость объекта.
  • opacity — прозрачность объекта.

Основные методы:

  • translate(vector) — смещение объекта.
  • rotate(angle) — вращение объекта.
  • scale(factor) — масштабирование объекта.
  • remove() — удаление из иерархии.
let rectangle = new Path.Rectangle(new Point(50, 50), new Size(100, 80));
rectangle.fillColor = 'red';
rectangle.position.x += 20;
rectangle.rotate(45);

Группы (Group)

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

let group = new Group();
let circle1 = new Path.Circle(new Point(50, 50), 30);
let circle2 = new Path.Circle(new Point(120, 50), 30);
group.addChild(circle1);
group.addChild(circle2);

group.position = new Point(200, 200); // перемещает обе окружности

Особенности групп:

  • Вложенные группы могут содержать другие группы, создавая многоуровневую иерархию.
  • Свойства группы наследуются вложенными объектами частично (например, прозрачность).
  • Методы addChild, removeChildren и insertChild применимы к группам так же, как к слоям.

Родительские и дочерние связи

Каждый объект в Paper.js имеет свойства:

  • parent — родительский элемент (Layer или Group).
  • children — массив дочерних элементов (только для Group и Layer).

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

console.log(group.children); // массив объектов внутри группы
console.log(circle1.parent); // group

Управление порядком отображения

Порядок рендеринга определяется порядком в массиве children родителя. Методы для управления:

  • bringToFront() — переместить объект на верхний уровень слоя.
  • sendToBack() — переместить объект на задний план.
  • insertChild(index, item) — вставить объект на конкретную позицию.
circle2.bringToFront(); // circle2 окажется выше circle1

Применение трансформаций в иерархии

Трансформации родителя влияют на всех дочерних объектов:

  • Поворот родителя вращает все дочерние элементы вокруг центра родителя.
  • Масштабирование увеличивает или уменьшает размеры всех потомков.
  • Перемещение родителя сдвигает координаты всех вложенных объектов.
group.rotate(30); // поворот всей группы на 30 градусов
group.scale(1.5); // масштаб всей группы

Заключение по иерархии объектов

Иерархическая модель Paper.js обеспечивает гибкость при работе с графикой:

  • Проекты → Слои → Группы → Элементы.
  • Дочерние объекты наследуют трансформации и свойства родителя.
  • Управление порядком отображения и видимостью становится простым и предсказуемым.

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

Оглавление