Класс pc.TouchDevice: touches, события

pc.TouchDevice — это класс, предоставляющий доступ к сенсорным событиям, таким как прикосновения, свайпы и другие жесты, на устройствах с сенсорными экранами. Этот класс является частью библиотеки PlayCanvas и используется для обработки ввода с сенсорных экранов, что позволяет создавать более интуитивно понятные и адаптированные для мобильных устройств приложения.

Основные функции класса pc.TouchDevice

Класс pc.TouchDevice предоставляет несколько свойств и методов для работы с сенсорным вводом. Рассмотрим его ключевые возможности:

  • Свойство touches. Это свойство возвращает массив всех текущих касаний, зарегистрированных на экране устройства. Каждый объект в массиве представляет собой одно прикосновение и включает информацию о его положении, идентификаторе, состоянии (активно ли касание) и времени его начала.

  • События касаний. Класс предоставляет несколько событий, таких как touchstart, touchmove, touchend и touchcancel, которые используются для отслеживания различных фаз прикосновения.

Свойство touches

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

Каждый объект pc.Touch включает следующие основные данные:

  • id (целое число): уникальный идентификатор прикосновения. Он используется для различения нескольких одновременных касаний.
  • x, y (числа): координаты точки касания относительно верхнего левого угла экрана. Эти значения меняются по мере того, как прикосновение перемещается по экрану.
  • startX, startY (числа): начальные координаты точки касания, которые фиксируются в момент начала прикосновения.
  • endX, endY (числа): конечные координаты, когда прикосновение завершено или отменено.
  • isPressed (булево значение): состояние касания, которое указывает, активно ли оно в данный момент.

Пример использования touches:

var touches = app.touchDevice.touches;
for (var i = 0; i < touches.length; i++) {
    var touch = touches[i];
    console.log("Касание ID: " + touch.id);
    console.log("Координаты: (" + touch.x + ", " + touch.y + ")");
}

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

События касаний

Класс pc.TouchDevice также поддерживает несколько событий для обработки разных стадий касания. Рассмотрим каждое из них.

touchstart

Это событие возникает в момент, когда пользователь начинает касаться экрана. Оно инициирует начало взаимодействия и передает объект pc.Touch, содержащий информацию о начале касания.

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

app.touchDevice.on('touchstart', function (event) {
    var touch = event.touch;
    console.log("Начато касание с ID: " + touch.id);
});
touchmove

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

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

app.touchDevice.on('touchmove', function (event) {
    var touch = event.touch;
    console.log("Касание с ID " + touch.id + " перемещается на (" + touch.x + ", " + touch.y + ")");
});
touchend

Это событие возникает, когда прикосновение завершено — пользователь убрал палец с экрана. Оно передает объект pc.Touch, который сообщает о завершении взаимодействия.

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

app.touchDevice.on('touchend', function (event) {
    var touch = event.touch;
    console.log("Касание с ID " + touch.id + " завершено");
});
touchcancel

Это событие возникает, если прикосновение было отменено по каким-то причинам (например, если устройство теряет сенсорный сигнал). Обычно оно используется для предотвращения неправильной обработки касания.

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

app.touchDevice.on('touchcancel', function (event) {
    var touch = event.touch;
    console.log("Касание с ID " + touch.id + " было отменено");
});

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

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

Пример:

app.touchDevice.on('touchstart', function (event) {
    var touch = event.touch;
    console.log("Начато касание ID: " + touch.id);
});

app.touchDevice.on('touchmove', function (event) {
    var touch = event.touch;
    console.log("Касание ID " + touch.id + " перемещается на (" + touch.x + ", " + touch.y + ")");
});

app.touchDevice.on('touchend', function (event) {
    var touch = event.touch;
    console.log("Касание ID " + touch.id + " завершено");
});

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

Масштабирование и вращение

Используя информацию о нескольких касаниях, можно реализовать сложные жесты, такие как масштабирование (пинч-зум) и вращение. Для этого требуется следить за изменением расстояния между двумя касаниями или углами между ними.

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

var initialDistance = 0;
app.touchDevice.on('touchstart', function (event) {
    if (event.touches.length === 2) {
        var touch1 = event.touches[0];
        var touch2 = event.touches[1];
        initialDistance = Math.sqrt(
            Math.pow(touch2.x - touch1.x, 2) + Math.pow(touch2.y - touch1.y, 2)
        );
    }
});

app.touchDevice.on('touchmove', function (event) {
    if (event.touches.length === 2) {
        var touch1 = event.touches[0];
        var touch2 = event.touches[1];
        var currentDistance = Math.sqrt(
            Math.pow(touch2.x - touch1.x, 2) + Math.pow(touch2.y - touch1.y, 2)
        );
        var scaleFactor = currentDistance / initialDistance;
        console.log("Масштабирование: " + scaleFactor);
    }
});

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

Заключение

Класс pc.TouchDevice предоставляет мощный инструмент для работы с сенсорным вводом в приложениях PlayCanvas. Он поддерживает множество типов событий, позволяя отслеживать касания, их перемещения и завершение. Использование этого класса дает возможность реализовывать различные жесты, такие как масштабирование и вращение, что делает приложения более удобными и интуитивно понятными на мобильных устройствах.

Оглавление