Автоматический scope

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

Основы автоматического scope

Когда скрипт Paper.js подключен к HTML-документу и не создается явный объект PaperScope, библиотека автоматически создает глобальный scope. Все объекты, включая Path, Point, Group и другие, создаются в этом scope. Это означает, что переменные типа:

var circle = new Path.Circle(new Point(100, 100), 50);
circle.fillColor = 'red';

будут автоматически добавлены в текущий активный проект без необходимости указывать project.activeLayer.addChild(circle).

Ключевой момент: автоматический scope работает только после вызова paper.setup(canvas), где canvas — элемент <canvas> в документе. Без инициализации холста scope не будет корректно создан.

var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

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

Связь между проектом и scope

Каждый scope содержит один или несколько проектов (Project). По умолчанию создается активный проект (project), на который направляются все команды при работе в автоматическом scope. Проект хранит свои слои, элементы и состояния, обеспечивая изоляцию объектов:

  • project.activeLayer — слой, на который добавляются новые элементы.
  • project.selectedItems — коллекция выделенных объектов в scope.
  • project.view — объект управления отображением, включая трансформации и события.

Пример создания нескольких элементов в автоматическом scope:

var rect = new Path.Rectangle(new Point(50, 50), new Size(100, 80));
rect.strokeColor = 'blue';

var circle = new Path.Circle(new Point(200, 200), 60);
circle.fillColor = 'green';

Все объекты автоматически добавляются в project.activeLayer.

Управление scope в сложных проектах

В крупных приложениях может понадобиться управление несколькими scope одновременно. Paper.js позволяет создавать дополнительные scope через new PaperScope(), но автоматический scope предоставляет удобную альтернативу для простых и средних задач. Важно понимать, что:

  • Любые глобальные объекты (Path, Point, Color) в автоматическом scope относятся к текущему активному проекту.
  • Изменение активного проекта через project.activate() перенаправляет все последующие команды в новый scope.

Пример:

var anotherScope = new paper.PaperScope();
anotherScope.setup(document.getElementById('canvas2'));

// Активируем новый проект
anotherScope.project.activate();

var line = new anotherScope.Path.Line(new anotherScope.Point(10, 10), new anotherScope.Point(100, 100));
line.strokeColor = 'orange';

Преимущества автоматического scope

  1. Минимизация кода: не нужно явно создавать и хранить объекты PaperScope.
  2. Простое управление объектами: все элементы сразу добавляются на активный слой проекта.
  3. Совместимость с DOM: автоматически интегрируется с <canvas> без дополнительных настроек.
  4. События и анимация: доступ к view.onFrame, view.onMouseMove и другим событиям осуществляется без явного указания scope.

Работа с событиями в автоматическом scope

Автоматический scope позволяет подключать обработчики событий к view проекта напрямую:

view.onFr ame = function(event) {
    circle.rotate(1); // Поворот объекта каждый кадр
};

view.onMouseM ove = function(event) {
    rect.position = event.point; // Следуем за курсором
};

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

Поддержка изоляции объектов

Хотя автоматический scope удобен, иногда необходимо изолировать объекты. Для этого используют Group:

var group = new Group([rect, circle]);
group.position = new Point(300, 300);

Все элементы внутри группы сохраняют относительные координаты и свойства, при этом остаются в автоматическом scope, но управляются как единое целое.

Интеграция с цветом и стилями

Paper.js поддерживает автоматическое применение свойств объектов в scope:

  • fillColor и strokeColor для заливки и обводки.
  • strokeWidth для толщины линии.
  • opacity для прозрачности.
circle.fillColor = 'purple';
circle.strokeColor = 'yellow';
circle.strokeWidth = 5;

Эти свойства применяются немедленно, и изменения отображаются в view без дополнительного рендеринга.

Поддержка трансформаций

Автоматический scope упрощает применение трансформаций:

  • rotate(angle, center)
  • scale(factor, center)
  • translate(delta)

Пример анимации в автоматическом scope:

view.onFr ame = function(event) {
    group.rotate(0.5);
    group.scale(1 + 0.001 * Math.sin(event.count / 10));
};

Все изменения применяются к объектам без необходимости явно ссылаться на scope или слой.

Резюме использования автоматического scope

Автоматический scope в Paper.js обеспечивает:

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

Такой подход идеально подходит для интерактивной графики, прототипирования и учебных проектов, где важно минимизировать количество boilerplate-кода и сосредоточиться на визуальных элементах.

Оглавление