Объект события FederatedPointerEvent

В PixiJS FederatedPointerEvent представляет собой единый механизм работы с указателями (мышь, касания, стилус) внутри сцены. Он объединяет обработку событий ввода и обеспечивает совместимость с различными устройствами. Этот объект расширяет возможности стандартного DOM-события, предлагая специфические свойства и методы для работы в контексте графического рендеринга.

Основные свойства

  • type — тип события (pointerdown, pointerup, pointermove, pointerover, pointerout и другие). Используется для определения, какое действие совершил пользователь.
  • target — ссылка на объект DisplayObject, на котором произошло событие. Позволяет напрямую взаимодействовать с элементом сцены.
  • currentTarget — объект, который в данный момент обрабатывает событие, часто совпадает с target, но может отличаться при всплытии событий.
  • pointerId — уникальный идентификатор указателя, полезен при работе с мультитач.
  • pointerType — тип устройства (mouse, touch, pen). Позволяет адаптировать обработку ввода под разные источники.
  • buttons — состояние кнопок мыши в момент события, числовое значение согласно стандарту DOM.
  • isPrimary — булево значение, указывающее, является ли указатель основным (например, первый палец при касании).
  • pressure — сила нажатия для устройств с поддержкой давления (стилус, сенсорные панели).
  • width и height — размеры контактной области указателя при касании, полезны для реалистичной обработки touch-событий.
  • tiltX и tiltY — угол наклона стилуса по осям X и Y.
  • twist — вращение стилуса относительно его оси.
  • global — объект Point, содержащий координаты события в глобальной системе сцены.
  • local — объект Point, содержащий координаты события в локальной системе координат target. Метод getLocalPosition(target) позволяет вычислять локальные координаты для произвольного объекта сцены.

Методы

  • stopPropagation() — предотвращает дальнейшее распространение события по иерархии объектов.
  • stopImmediatePropagation() — полностью блокирует обработку события другими слушателями, включая текущий уровень.
  • getLocalPosition(displayObject) — возвращает координаты события относительно указанного объекта. Внутри можно передавать любые объекты сцены (Container, Sprite, Graphics) для получения корректного позиционирования.
  • preventDefault() — блокирует стандартное поведение браузера, например, прокрутку страницы при касании на мобильных устройствах.

Особенности обработки событий

  1. Всплытие и захват FederatedPointerEvent поддерживает модель всплытия событий, аналогичную DOM: событие сначала создается на целевом объекте, затем поднимается вверх по иерархии Container. Свойства target и currentTarget помогают различать исходный объект и текущий обработчик.

  2. Мультитач и множественные указатели Использование pointerId позволяет одновременно отслеживать несколько касаний или нажатий. Например, для реализации жестов pinch-to-zoom или multi-button drag достаточно хранить состояние каждого указателя отдельно.

  3. Поддержка различных устройств ввода pointerType дает возможность адаптировать логику обработки: рисование стилусом, управление мышью или касанием пальца, с учётом особенностей каждого устройства, таких как pressure, tiltX и tiltY.

  4. Конвертация координат Одной из ключевых задач при работе с FederatedPointerEvent является преобразование глобальных координат в локальные. Для этого используется метод getLocalPosition, который учитывает трансформации объектов сцены, их масштаб и вращение. Без этого рисование или взаимодействие объектов может быть неточным.

Практические сценарии использования

  • Интерактивные спрайты Создание кнопок или объектов, реагирующих на нажатия, с учётом мультитач:

    sprite.on('pointerdown', (event) => {
    const localPos = event.getLocalPosition(sprite);
    console.log('Координаты на спрайте:', localPos.x, localPos.y);
});

  • Рисование стилусом Использование pressure, tiltX, tiltY для динамического изменения толщины линии:

    graphics.lineStyle(event.pressure * 10, 0x000000);
graphics.moveTo(lastX, lastY);
graphics.lineTo(event.global.x, event.global.y);

  • Жесты мультитач Сохранение позиции каждого указателя по pointerId позволяет вычислять масштаб и вращение между двумя пальцами.

Оптимизация работы

  • Фильтрация по типу устройства Для улучшения производительности можно обрабатывать только нужные типы указателей:

    if (event.pointerType !== 'touch') return;

  • Минимизация вызова getLocalPosition Поскольку вычисление локальных координат включает матричные трансформации, его лучше вызывать только при необходимости, например, при начале события pointerdown или pointermove.

  • Управление всплытием Использование stopPropagation() предотвращает лишнюю обработку в родительских контейнерах и снижает нагрузку на сцену.

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

Оглавление