onMouseEnter и onMouseLeave

В Paper.js события onMouseEnter и onMouseLeave предназначены для отслеживания момента, когда указатель мыши входит на область объекта или покидает её. Они тесно связаны с объектами типа Path, Shape, Raster, Group и другими элементами, которые могут быть отображены на Canvas. Эти события позволяют создавать интерактивные элементы с визуальной реакцией на наведение мыши.

Основные принципы работы

  • onMouseEnter срабатывает один раз в момент, когда курсор мыши пересекает границу объекта.
  • onMouseLeave срабатывает один раз в момент, когда курсор мыши покидает границу объекта.
  • События не повторяются, если мышь находится внутри объекта — повторное срабатывание произойдет только при повторном входе или выходе.
  • Для объектов без явно замкнутой области (Path с closed: false) пересечение определяется только по линии контура, поэтому вход/выход будет срабатывать, только если курсор находится точно над линией.

Пример типичной структуры обработчиков:

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

circle.onMouseEn ter = function(event) {
    this.fillColor = 'green';
};

circle.onMouseLe ave = function(event) {
    this.fillColor = 'red';
};

В этом примере цвет круга меняется на зелёный при наведении и возвращается к красному при уходе мыши.

Контекст объекта внутри обработчика

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

  • fillColor и strokeColor — изменение цвета заливки и контура
  • scale() и rotate() — динамическое изменение размеров и вращение
  • opacity — управление прозрачностью

Пример с анимацией при наведении:

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

rect.onMouseEn ter = function() {
    this.scale(1.2);
};

rect.onMouseLe ave = function() {
    this.scale(1 / 1.2);
};

События и группы объектов

События onMouseEnter и onMouseLeave могут быть назначены как отдельным объектам, так и группам (Group). Если обработчик привязан к группе, событие срабатывает при входе курсора на любой из дочерних элементов.

var group = new Group([
    new Path.Circle([100, 100], 30),
    new Path.Rectangle([150, 150], [60, 40])
]);

group.onMouseEn ter = function() {
    this.children.forEach(child => child.fillColor = 'orange');
};

group.onMouseLe ave = function() {
    this.children.forEach(child => child.fillColor = 'gray');
};

Особенности взаимодействия с другими событиями мыши

  1. onMouseMove: срабатывает непрерывно при движении мыши над объектом. Может комбинироваться с onMouseEnter, чтобы создавать более сложные эффекты.
  2. onMouseDown / onMouseUp: события клика могут происходить одновременно с наведением, важно правильно отслеживать порядок обработки.
  3. События на пересекающихся объектах: Paper.js выбирает верхний объект по z-index (порядок добавления в проект) для срабатывания событий.

Оптимизация интерактивности

  • Для сложных объектов рекомендуется использовать hitTest() внутри глобального tool.onMouseMove вместо прямого назначения событий, чтобы контролировать точное пересечение.
  • Минимизировать количество объектов с обработчиками для оптимизации производительности на больших холстах.

Пример комбинированного подхода:

tool.onMouseM ove = function(event) {
    var hitResult = project.hitTest(event.point);
    if (hitResult && !hitResult.item.isHovered) {
        hitResult.item.isHovered = true;
        hitResult.item.onMouseEnter(event);
    }
    project.activeLayer.children.forEach(function(child) {
        if (child.isHovered && child !== hitResult?.item) {
            child.isHovered = false;
            child.onMouseLeave(event);
        }
    });
};

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

Заключение по применению

onMouseEnter и onMouseLeave являются мощными инструментами для создания интерактивных элементов в Paper.js. Они позволяют:

  • Реализовывать визуальные эффекты при наведении
  • Управлять анимацией и трансформациями объектов
  • Создавать интерактивные группы элементов
  • Оптимизировать обработку событий на больших сценах

Эти события идеально подходят для интерфейсных компонентов, игр и визуализации данных, где важно реагировать на перемещение мыши по объектам.

Оглавление