Стандартные события указателя: pointermove, pointerdown, pointerup

В PixiJS работа с интерактивными объектами основана на системе событий указателя. Основными событиями являются pointerdown, pointerup и pointermove. Они предоставляют гибкий способ реагирования на действия пользователя, такие как нажатия, отпускания и перемещения мыши или касания на сенсорных устройствах.

Включение интерактивности

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

sprite.interactive = true;
sprite.buttonMode = true; // отображение курсора как указателя
  • interactive — включает обработку событий.
  • buttonMode — изменяет курсор на указатель при наведении (опционально, для UX).

Событие pointerdown

Срабатывает при начале взаимодействия с объектом (нажатие мыши или касание).

sprite.on('pointerdown', (event) => {
    console.log('Нажатие на объект', event.data.global);
});

  • event.data.global возвращает координаты указателя относительно всей сцены.

  • Можно использовать event.data.getLocalPosition(sprite) для получения координат относительно объекта.

  • Позволяет реализовать:

    • перетаскивание объектов,
    • визуальные эффекты нажатия,
    • старт анимации.

Событие pointerup

Срабатывает при отпускании кнопки мыши или окончания касания.

sprite.on('pointerup', (event) => {
    console.log('Отпускание на объекте', event.data.global);
});

  • Различие с pointerupoutside: pointerupoutside срабатывает, если указатель отпускают вне границ объекта, что полезно для отслеживания отмены действий.

  • Используется для:

    • завершения перетаскивания,
    • активации кнопок,
    • логики «клик внутри/вне элемента».

Событие pointermove

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

sprite.on('pointermove', (event) => {
    const position = event.data.global;
    console.log('Перемещение указателя', position.x, position.y);
});
  • При использовании с pointerdown позволяет реализовать drag-and-drop:
sprite.on('pointerdown', (event) => {
    sprite.data = event.data;
    sprite.dragging = true;
});

sprite.on('pointerup', () => {
    sprite.dragging = false;
    sprite.data = null;
});

sprite.on('pointermove', () => {
    if (sprite.dragging) {
        const newPosition = sprite.data.getLocalPosition(sprite.parent);
        sprite.x = newPosition.x;
        sprite.y = newPosition.y;
    }
});

  • pointermove полезно для динамических эффектов:

    • подсветка объекта при наведении,
    • отслеживание жестов,
    • перемещение объектов в интерактивных сценах.

Различия между событиями указателя и мыши

PixiJS использует события указателя, которые объединяют:

  • мышь (mousedown, mouseup, mousemove),
  • сенсорные касания (touchstart, touchend, touchmove),
  • стилусные устройства.

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

Управление всплытием событий

PixiJS поддерживает механизм всплытия (event.stopPropagation()) и поглощения событий:

sprite.on('pointerdown', (event) => {
    console.log('Нажатие на объект');
    event.stopPropagation(); // предотвращает передачу события родителям
});
  • Позволяет создавать сложные интерфейсы, где дочерние объекты могут перехватывать события, не влияя на родительские контейнеры.
  • Комбинация interactiveChildren = false у контейнеров ограничивает обработку событий только самим контейнером.

Практические рекомендации

  • Для drag-and-drop всегда использовать комбинацию pointerdown, pointermove и pointerup.
  • Для кнопок достаточно pointerdown или pointerup, в зависимости от UX предпочтений.
  • Всегда очищать данные указателя после завершения взаимодействия (sprite.data = null), чтобы избежать утечек памяти и багов с drag-and-drop.
  • Использовать координаты event.data.getLocalPosition() для точного позиционирования объектов относительно контейнеров.

Эти три события (pointerdown, pointerup, pointermove) являются основой интерактивности в PixiJS. Правильное их использование позволяет создавать сложные интерфейсы, игры и визуальные приложения с поддержкой любых типов ввода.

Оглавление