item.onClick и события на объектах

В Paper.js каждый элемент сцены (Item) может реагировать на события, такие как клики мыши, движение курсора и перетаскивание. Одним из самых часто используемых событий является onClick. Оно позволяет связать определённое поведение с щелчком на объекте.

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

circle.onCl ick = function(event) {
    this.fillColor = 'blue';
};

В этом примере при клике на круг его цвет изменяется с красного на синий. Объект event содержит информацию о событии: координаты клика, нажатые клавиши модификаторы и другие параметры.

Структура объекта события

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

  • point — точка клика в координатах Paper.js (Point).
  • event — оригинальный объект DOM события (MouseEvent или TouchEvent).
  • count — количество последовательных кликов (удобно для обработки двойного клика).
  • modifiers — состояние клавиш-модификаторов (shift, ctrl, alt, meta).

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

circle.onCl ick = function(event) {
    if (event.modifiers.shift) {
        this.fillColor = 'green';
    } else {
        this.fillColor = 'orange';
    }
};

Другие события Item

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

  • onMouseDown — срабатывает при нажатии кнопки мыши на объекте.
  • onMouseUp — при отпускании кнопки мыши.
  • onMouseDrag — при перетаскивании объекта мышью.
  • onMouseMove — при движении мыши над объектом.
  • onMouseEnter / onMouseLeave — при входе или выходе курсора из области объекта.

Пример перетаскивания круга:

circle.onMouseD rag = function(event) {
    this.position += event.delta;
};

event.delta содержит смещение курсора между предыдущим и текущим кадром, что позволяет плавно перемещать объект.

Назначение событий напрямую vs через Paper.view

События можно назначать не только на отдельные объекты, но и на Paper.view для глобальной обработки мыши:

view.onCl ick = function(event) {
    console.log('Клик по канве в точке:', event.point);
};

Отличие заключается в том, что view.onClick реагирует на клики в области всего холста, тогда как item.onClick реагирует только при попадании клика по конкретному объекту.

Взаимодействие нескольких объектов

Если объекты перекрываются, Paper.js проверяет события сверху вниз по визуальному слою (item.zOrder). Клик срабатывает на верхнем объекте. Для изменения этого поведения используется свойство item.hitTestable:

circle.hitTestable = false;

Теперь клики проходят сквозь объект и могут быть перехвачены нижележащими элементами.

Обработка двойного клика и клика с модификаторами

Для реализации различных реакций на одинарный и двойной клик применяется свойство event.count:

circle.onCl ick = function(event) {
    if (event.count === 2) {
        this.remove();
    } else {
        this.fillColor = 'yellow';
    }
};

В этом примере одинарный клик меняет цвет объекта, а двойной клик удаляет его.

Практические советы

  • Использовать hitTestable для управления тем, какие объекты должны реагировать на клики.
  • Комбинировать события: onMouseEnter и onMouseLeave удобно применять для визуальной подсветки объектов при наведении.
  • Использовать event.delta для плавного перемещения объектов или анимаций при перетаскивании.
  • Сочетать модификаторы клавиш для расширенной интерактивности без создания лишних объектов.

Резюме по событиям Item

  • item.onClick — основной инструмент для реагирования на клики по объекту.
  • События передаются объекту event, содержащему координаты, модификаторы и количество кликов.
  • Paper.js предоставляет широкий набор событий мыши для создания интерактивных графических интерфейсов.
  • Управление видимостью и приоритетом клика объектов достигается через hitTestable и порядок слоёв.

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

Оглавление