Project.layers и управление слоями

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

Доступ к слоям

Каждый проект имеет массив слоев:

let layers = project.layers;
console.log(layers.length); // количество слоев в проекте

Первый слой создаётся автоматически при инициализации проекта. Каждый элемент в массиве является объектом Layer, который наследует свойства и методы от Item.

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

let activeLayer = project.activeLayer;

ActiveLayer определяет, в каком слое создаются новые элементы по умолчанию.

Создание и добавление слоев

Новый слой создаётся через конструктор Layer():

let layer = new Layer();
layer.name = "Foreground";

Добавление слоя в проект происходит автоматически при создании, если не указано иное. Можно управлять порядком слоев с помощью методов массива:

project.addLayer(layer);       // добавление слоя в конец массива
project.insertLayer(0, layer); // вставка слоя на первую позицию

Управление порядком слоев

Слои в Paper.js отрисовываются сверху вниз. Слой с наибольшим индексом находится выше остальных. Изменение порядка слоев осуществляется с помощью методов:

layer.sendToBack();   // перемещает слой на самый нижний уровень
layer.bringToFront(); // перемещает слой на верхний уровень
layer.insertBelow(otherLayer); // вставляет слой ниже указанного
layer.insertAbove(otherLayer); // вставляет слой выше указанного

Важно: изменение порядка слоев не меняет порядок объектов внутри слоя. Порядок элементов внутри слоя управляется отдельно через методы элементов (sendToBack(), bringToFront() и т.д.).

Свойства слоев

Слой имеет несколько ключевых свойств:

  • name – строковое имя слоя, полезно для идентификации.
  • visible – логическое значение, определяющее видимость слоя.
  • locked – блокировка слоя для предотвращения изменений.
  • opacity – прозрачность слоя (0–1).
  • blendMode – режим смешивания слоя с нижележащими слоями.

Пример использования:

let background = new Layer();
background.name = "Background";
background.opacity = 0.5;
background.visible = true;
background.locked = false;

Группировка и управление объектами через слои

Слой может содержать множество объектов (Path, Shape, Group). Объекты добавляются автоматически в активный слой:

project.activeLayer = background;
let circle = new Path.Circle(new Point(100, 100), 50);
circle.fillColor = 'red';

Для доступа к объектам внутри слоя можно использовать свойство Layer.children:

for (let item of background.children) {
    console.log(item.className, item.bounds);
}

Также можно удалять все объекты слоя:

background.removeChildren(); // удаляет все элементы слоя

Дублирование и удаление слоев

Для копирования слоя используется метод Layer.clone():

let copyLayer = background.clone();
copyLayer.name = "Background Copy";

Удаление слоя происходит через метод remove():

copyLayer.remove();

При удалении слоя все содержащиеся в нём элементы также удаляются.

Изменение активного слоя

Для переключения текущего слоя для создания новых элементов используется:

project.activeLayer = project.layers[1]; // активирует второй слой

После смены активного слоя новые объекты будут автоматически добавляться именно в него.

Итоговое использование слоев

  • Слои позволяют структурировать графику и разделять визуальные элементы.
  • Управление видимостью и блокировкой слоев упрощает работу с большими проектами.
  • Методы изменения порядка слоев дают контроль над визуальной иерархией.
  • Свойства слоя (opacity, blendMode) используются для сложных визуальных эффектов.

Эффективное использование Project.layers делает код чистым, упрощает редактирование и позволяет создавать сложные интерактивные графические сцены.

Оглавление