Выбор объектов

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

В Paper.js объекты сцены представляются как Item. Все объекты, такие как Path, Raster, Group, Shape, наследуются от класса Item, что позволяет применять к ним единый набор методов для выбора и манипуляции.

Ссылки на объекты

Каждый объект, созданный в Paper.js, автоматически добавляется в активный проект (project.activeLayer по умолчанию). Для получения ссылки на объект можно использовать следующие подходы:

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'red'
});

Здесь переменная circle содержит ссылку на объект круга. Эта ссылка позволяет напрямую изменять свойства объекта: position, fillColor, strokeColor, scale() и другие.

Работа с элементами слоя

Слой (Layer) содержит массив children, который хранит все объекты, добавленные в этот слой. Выбор объектов внутри слоя осуществляется через:

var allItems = project.activeLayer.children;

Особенности:

  • children возвращает живой массив объектов, который обновляется при добавлении или удалении объектов.
  • Доступ к объекту по индексу: project.activeLayer.children[0].
  • Можно фильтровать объекты по типу:
var paths = project.activeLayer.children.filter(function(item){
    return item instanceof Path;
});

Поиск объектов по свойствам

Paper.js предоставляет методы для работы с объектами на основе их свойств:

item.name

Каждому объекту можно присвоить имя:

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [100, 100],
    fillColor: 'blue',
    name: 'myRect'
});

Для поиска объекта по имени:

var found = project.activeLayer.findChildren({ name: 'myRect' });

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

var redItems = project.activeLayer.findChildren(function(item){
    return item.fillColor && item.fillColor.toCSS(true) === '#ff0000';
});

Поиск по типу

Paper.js позволяет фильтровать объекты по их типу, что особенно полезно при работе с большим количеством элементов:

var circles = project.activeLayer.children.filter(function(item){
    return item instanceof Path.Circle;
});

Альтернативно, можно использовать findChildren с фильтром по классу:

var circles = project.activeLayer.findChildren({ class: Path.Circle });

Выбор объектов в группе

Группы (Group) используются для объединения объектов и управления ими как одним целым. Группа сама является объектом Item, поэтому методы выбора применимы как к группе, так и к её дочерним элементам:

var group = new Group();
var c1 = new Path.Circle([50, 50], 20);
var c2 = new Path.Circle([100, 50], 20);
group.addChildren([c1, c2]);

Для выбора дочерних элементов группы:

var children = group.children;
var circlesInGroup = group.children.filter(item => item instanceof Path.Circle);

Выбор объектов по позиции

Paper.js поддерживает методы для работы с пространственными координатами:

  • item.hitTest(point) — проверяет попадание точки в объект.
  • project.activeLayer.hitTest(point) — возвращает первый объект, попавший под точку.

Пример:

var hitResult = project.activeLayer.hitTest(new Point(100, 100));
if(hitResult) {
    hitResult.item.fillColor = 'green';
}

Параметры hitTest позволяют уточнять, какие элементы проверять: fill, stroke, segments, bounds.

Групповой выбор и фильтрация

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

var selectedItems = project.activeLayer.children
    .filter(item => item.fillColor)
    .filter(item => item.fillColor.toCSS(true) === '#ff0000')
    .map(item => {
        item.scale(1.2);
        return item;
    });

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

Рекурсивный поиск

Метод findChildren может искать вложенные объекты внутри групп:

var allRedItems = project.activeLayer.findChildren(function(item){
    return item.fillColor && item.fillColor.toCSS(true) === '#ff0000';
}, true); // true — рекурсивный поиск

Рекурсивный поиск полезен для сложных сцен с несколькими уровнями групп.

Итоговые принципы выбора объектов

  1. Использовать ссылки на объекты при их создании для быстрого доступа.
  2. Слой (Layer) и его children — основной механизм обхода всех элементов.
  3. Фильтры по свойствам, типу и имени позволяют точно выбрать нужные объекты.
  4. Группы объединяют объекты, но внутри них методы выбора работают так же, как и на слое.
  5. Hit-тесты обеспечивают интерактивный выбор по позиции курсора.
  6. Рекурсивный поиск необходим для сложных вложенных структур.

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

Оглавление