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

PixiJS — это мощная библиотека для работы с графикой, которая поддерживает рендеринг 2D-контента с использованием WebGL и HTML5. Важным аспектом работы с графическими элементами является обработка пользовательских взаимодействий, в том числе касаний на мобильных устройствах и сенсорных экранах. Для эффективной работы с такими событиями в PixiJS предусмотрены специальные механизмы.

События касания в PixiJS

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

  • touchstart — событие, которое срабатывает, когда пользователь касается экрана.
  • touchmove — событие, возникающее при перемещении пальца по экрану.
  • touchend — событие, когда пользователь прекращает касание.
  • touchcancel — событие, которое возникает при отмене касания (например, если система должна прервать обработку касания).

Регистрация событий касания

Для того чтобы обработать событие касания, необходимо назначить соответствующие слушатели на объекте или на сцене. В PixiJS это делается с помощью метода interactive и привязки события.

Пример базовой регистрации событий касания:

const app = new PIXI.Application();
document.body.appendChild(app.view);

// Создаем спрайт
const sprite = PIXI.Sprite.from('image.png');
sprite.x = 100;
sprite.y = 100;
sprite.interactive = true; // Устанавливаем интерактивность

// Добавляем обработчики событий касания
sprite.on('touchstart', (event) => {
  console.log('Касание началось!');
});

sprite.on('touchmove', (event) => {
  console.log('Касание в процессе перемещения!');
});

sprite.on('touchend', (event) => {
  console.log('Касание завершено!');
});

app.stage.addChild(sprite);

Координаты касания

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

  • event.data.global — глобальные координаты касания на сцене.
  • event.data.getLocalPosition(displayObject) — локальные координаты касания относительно конкретного объекта.

Пример получения координат касания:

sprite.on('touchstart', (event) => {
  const globalPos = event.data.global;
  console.log(`Координаты касания: X = ${globalPos.x}, Y = ${globalPos.y}`);
});

Обработка нескольких касаний

Одним из ключевых аспектов мобильных интерфейсов является поддержка многокасания (multi-touch). PixiJS позволяет обрабатывать несколько касаний одновременно. В объекте события event.data содержится информация обо всех касаниях, активных в момент события.

Для обработки нескольких касаний используется массив event.data.touches, который хранит все активные касания. Каждый объект в массиве содержит информацию о координатах и других параметрах касания.

Пример обработки нескольких касаний:

sprite.on('touchstart', (event) => {
  const touches = event.data.touches;
  touches.forEach((touch, index) => {
    console.log(`Касание ${index + 1}: X = ${touch.global.x}, Y = ${touch.global.y}`);
  });
});

Окончание касания

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

Пример обработки завершения касания:

sprite.on('touchend', (event) => {
  console.log('Касание завершено!');
  const globalPos = event.data.global;
  console.log(`Координаты окончания: X = ${globalPos.x}, Y = ${globalPos.y}`);
});

Прерывание касания

Событие touchcancel позволяет отслеживать отмену касания, например, если касание было прервано системой (например, если пользователь случайно убрал палец с экрана или при переключении приложений). Обработка таких событий может быть полезна, чтобы корректно сбрасывать состояние интерфейса или отменять действия.

Пример обработки отмены касания:

sprite.on('touchcancel', (event) => {
  console.log('Касание было отменено!');
});

Использование событий на контейнерах

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

Для того чтобы зарегистрировать события на контейнере, достаточно выполнить те же шаги, что и для отдельного объекта. Важно помнить, что обработчики событий могут быть срабатываны не только для конкретного элемента, но и для всего контейнера.

Пример работы с контейнером:

const container = new PIXI.Container();
container.interactive = true;

// Добавляем спрайт в контейнер
container.addChild(sprite);

// Обработчик события на контейнере
container.on('touchstart', (event) => {
  console.log('Касание по контейнеру!');
});

app.stage.addChild(container);

Поведение событий при вложенных элементах

При обработке событий касания в PixiJS также стоит учитывать, как ведут себя события при взаимодействии с вложенными элементами. События касания могут быть обработаны как на родительских элементах, так и на дочерних. По умолчанию события касания “всплывают”, что означает, что они сначала обрабатываются на самых вложенных объектах, а затем передаются родительским.

В PixiJS можно изменить поведение всплытия событий с помощью параметра event.stopPropagation(). Это позволяет предотвратить дальнейшее распространение события на родительские элементы.

Пример остановки всплытия события:

sprite.on('touchstart', (event) => {
  console.log('Касание по спрайту!');
  event.stopPropagation(); // Останавливает распространение события
});

Заключение

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

Оглавление