Layer и многослойность

В Paper.js объекты визуализации организуются в слои, которые предоставляют мощный инструмент для управления сложными графическими композициями. Каждый слой является контейнером для элементов: путей (Path), растрированных изображений (Raster), текстовых объектов (PointText) и других элементов Paper.js. Слои позволяют управлять порядком отображения, видимостью и свойствами объектов, не затрагивая сами объекты внутри.

Создание и использование слоев

Создание нового слоя осуществляется через конструктор Layer или добавление в проект через project.addLayer():

let layer1 = new Layer();
let layer2 = new Layer({ opacity: 0.5 });

Ключевые моменты:

  • Каждый созданный слой автоматически становится активным. Любые новые объекты будут добавляться именно в него.
  • Свойство opacity задаёт прозрачность всего слоя.
  • Метод activate() переключает активный слой:
layer2.activate();
let circle = new Path.Circle(new Point(100, 100), 50);
circle.fillColor = 'red';

В этом примере круг будет добавлен именно на layer2.

Порядок слоев

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

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

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

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

  • visible — определяет видимость слоя (true или false).
  • locked — блокирует слой от изменений (true — нельзя редактировать объекты слоя).
  • opacity — прозрачность слоя (0.0–1.0).
  • blendMode — режим смешивания, аналогичный CSS mix-blend-mode ('normal', 'multiply', 'screen' и т.д.).
  • children — коллекция всех объектов слоя, включая подслои.

Пример:

layer1.visible = false;
layer2.locked = true;
layer2.opacity = 0.7;

Работа с детьми слоя

Все объекты внутри слоя доступны через layer.children, что позволяет управлять их состоянием одновременно:

layer1.children.forEach(function(item) {
    item.fillColor = 'blue';
});

Можно добавлять новые элементы напрямую в слой через layer.addChild(item):

let path = new Path.Rectangle([50, 50], [100, 100]);
layer2.addChild(path);

Активный слой и проект

В Paper.js есть понятие активного слоя. Все объекты создаются в активном слое. Свойство project.activeLayer всегда указывает на текущий активный слой.

console.log(project.activeLayer); // текущий активный слой
layer1.activate();
console.log(project.activeLayer === layer1); // true

Важно помнить: если не активировать нужный слой, объекты будут добавлены в слой по умолчанию.

Многослойность и взаимодействие

Использование нескольких слоев облегчает:

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

Пример с эффектом:

let backgroundLayer = new Layer();
let effectLayer = new Layer();

backgroundLayer.addChild(new Path.Circle(new Point(150, 150), 100));
backgroundLayer.children[0].fillColor = 'green';

effectLayer.blendMode = 'multiply';
effectLayer.addChild(new Path.Rectangle([50, 50], [200, 200]));
effectLayer.children[0].fillColor = 'red';

В этом примере слой effectLayer с режимом смешивания multiply накладывается на слой backgroundLayer, создавая эффект комбинирования цветов.

Удаление и очистка слоя

Удаление слоя выполняется методом remove():

layer2.remove();

Для очистки всех объектов в слое используется метод removeChildren():

layer1.removeChildren();

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

Итоговые рекомендации по работе со слоями

  • Использовать слои для разделения логических частей сцены.
  • Всегда контролировать активный слой перед добавлением объектов.
  • Применять свойства visible, locked и opacity для удобного управления визуализацией.
  • Использовать методы управления порядком слоев для динамического отображения элементов.

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

Оглавление