Как работать с тачскрином в JavaScript?

Характерной особенностью большей части современных мобильных устройств выступает комплектование сенсорными экранами. Последние называются touch screen или, в русскоязычном варианте, тачскрин. Благодаря им появляется возможность задействования так называемых touch-событий, когда управление устройством ведется не с помощью мышки, как для обычного ПК, а посредством прикосновений. Рассмотрим подробнее, как решается задача программирования функционала веб сайтов для управления тачскрином мобильного устройства в самом популярном языке frontend-программирования Java Script.

Работа с тачскрином в JS

Количество мобильных устройств с сенсорными экранами постоянно растет. Вершиной прогресса стали популярные сегодня Bond Touch – парные браслеты, позволяющие обмениваться эмоциями на расстоянии посредством прикосновения к изделию.

Логичным следствием востребованности тачскринов стала необходимо адаптации сайтов для работы с ними.

Чтобы понять, как она происходит с применением возможностей языка программирования JavaScript, требуется перечислить несколько вводных моментов. Первый касается четырех основных touch-событий. В их числе:

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

Чтобы модифицировать интерфейс сайта для работы с тачскрином перечисленных выше четырех событий вполне достаточно. Сведения о touch-событиях размещаются в трех списках:

• touches, в котором указываются все пальцы, прикоснувшиеся к экрану;
• targetTouches, содержащий информацию о контактах с определенным элементом;
• changedTouches, который выступает одним из параметров объектов event и представляющий собой массив информации, включающий все данные о текущих касаниях, что необходимо для возможности обработки одновременных нажатий экрана несколькими пальцами.

В завершении части статьи, предваряющей непосредственное написание кода, необходимо перечислить данные непосредственно о пальце, контактирующем с экраном. Они необходимы для идентификации конкретного touch-события и включают три реквизита:

• уникальный ID прикосновения – identifier;
• объект, с которым контактировал палец – target;
• координаты точки касания на веб-странице – PageX и PageY.

Большая часть терминов достаточно легко переводится и четко ассоциируется с конкретными действиями пользователя.

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

Написание скрипта

С помощью описанного выше функционала вполне реально описать основные виды взаимодействий с сенсорным экраном в процессе использования веб-сайта. Чтобы лучше понять приведенный далее программный код целесообразно выделить четыре основных и две вспомогательных функции. К числу первых относятся:

1. Срабатывание в момент касания и сохранение стартовой позиции – TouchStart (). Важно отметить, что ряд функций базируется на описанных ранее touch-событиях.
2. Срабатывание в процессе движения с сохранением нового положения – TouchMove ().
3. Очищение базы данных от сведений о начальной и текущей позиции пальца – TouchEnd ().
4. Проверка соответствия движения пальца пользователя свайпу – CheckAction ().

Две вспомогательных функции выглядят следующим образом:

1. Рисование точки на месте текущей позиции – Draw ().
2. Рисование линии, соединяющей начальную и текущую позиции – DrawLine ().

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

Программный код приложения выглядит следующим образом.

//Получение холста и его контекста

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

//Чувствительность — количество пикселей, после которого жест будет считаться свайпом

const sensitivity = 20;

//Получение поля, в котором будут выводиться сообщения

const msgBox = document.getElementById("msg-box");

var touchStart = null; //Точка начала касания

var touchPosition = null; //Текущая позиция

//Перехватываем события

canvas.addEventListener("touchstart", function (e) { TouchStart(e); }); //Начало касания

canvas.addEventListener("touchmove", function (e) { TouchMove(e); }); //Движение пальцем по экрану

//Пользователь отпустил экран

canvas.addEventListener("touchend", function (e) { TouchEnd(e, "green"); });

//Отмена касания

canvas.addEventListener("touchcancel", function (e) { TouchEnd(e, "red"); });

function TouchStart(e)

{

//Получаем текущую позицию касания

touchStart = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };

touchPosition = { x: touchStart.x, y: touchStart.y };

Draw(touchPosition.x, touchPosition.y, 6, "blue"); //Рисуем точку начала касания

}

function TouchMove(e)

{

//Получаем новую позицию

touchPosition = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };

Draw(touchPosition.x, touchPosition.y, 2); //Рисуем точку текущей позиции

}

function TouchEnd(e, color)

{

DrawLine(); //Рисуем линию между стартовой и конечной точками

Draw(touchPosition.x, touchPosition.y, 6, color); //Рисуем конечную точку

CheckAction(); //Определяем, какой жест совершил пользователь

//Очищаем позиции

touchStart = null;

touchPosition = null;

}

function CheckAction()

{

var d = //Получаем расстояния от начальной до конечной точек по обеим осям

{

x: touchStart.x - touchPosition.x,

y: touchStart.y - touchPosition.y

};

var msg = ""; //Сообщение

if(Math.abs(d.x) > Math.abs(d.y)) //Проверяем, движение по какой оси было длиннее

{

if(Math.abs(d.x) > sensitivity) //Проверяем, было ли движение достаточно длинным

{

if(d.x > 0) //Если значение больше нуля, значит пользователь двигал пальцем справа налево

{

msg = "Swipe Left";

}

else //Иначе он двигал им слева направо

{

msg = "Swipe Right";

}

}

}

else //Аналогичные проверки для вертикальной оси

{

if(Math.abs(d.y) > sensitivity)

{

if(d.y > 0) //Свайп вверх

{

msg = "Swipe up";

}

else //Свайп вниз

{

msg = "Swipe down";

}

}

}

msgBox.innerText = msg; //Выводим сообщение

}

function Draw(x, y, weight, color = "#000") //Функция рисования точки

{

ctx.fillStyle = color;

let weightHalf = weight / 2;

ctx.fillRect(x - weightHalf, y - weightHalf, weight, weight);

}

function DrawLine() //Функция рисования линии

{

ctx.strokeStyle = "#ccc";

ctx.beginPath();

ctx.moveTo(touchStart.x, touchStart.y);

ctx.lineTo(touchPosition.x, touchPosition.y);

ctx.stroke();

}

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

Они имеют намного более короткий и простой программный код.

Касание (Tap)

Обычное прикосновение пальца к экрану с последующим прекращением контакта. Самый простой способ описания этого действия выглядит так.

obj.addEventListener('touchstart', function(event) {

if (event.targetTouches.length == 1) {

var myclick=event.targetTouches[0]; /*Ваш код*/

}

}, false);

Длительное касание (Long Tap)

Возможности JavaScript позволяют несколько вариантов программирования действия. Самый простой предусматривает фиксацию начала контакта (как места, так и времени), окончания контакта и проверку изменения местоположения пальца пользователя.

var ldelay;

var betw={};

document.addEventListener('touchstart', function(event) {

event.preventDefault();

event.stopPropagation();

ldelay=new Date();

betw.x=event.changedTouches[0].pageX;

betw.y=event.changedTouches[0].pageY;

}, false);

//Ловим отпускание пальца//

document.addEventListener('touchend', function(event) {

var pdelay=new Date();

if(event.changedTouches[0].pageX==betw.x &&

event.changedTouches[0].pageY==betw.y &&

(pdelay.getTime()-ldelay.getTime())>800){

//Здесь ваш код//

}

}, false);

Листание (Swipe)

Одна из самых стандартных для мобильных устройств операций. Ее востребованность объясняется предельно просто – небольшим размером экрана, результатом чего становится необходимость частого обновления информации. Одна из реализаций действия с помощью JavaScript имеет следующий вид.

var initialPoint;

var finalPoint;

document.addEventListener('touchstart', function(event) {

event.preventDefault();

event.stopPropagation();

initialPoint=event.changedTouches[0];

}, false);

document.addEventListener('touchend', function(event) {

event.preventDefault();

event.stopPropagation();

finalPoint=event.changedTouches[0];

var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);

var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);

if (xAbs > 20 || yAbs > 20) {

if (xAbs > yAbs) {

if (finalPoint.pageX < initialPoint.pageX){

//СВАЙП ВЛЕВО//}

else{

//СВАЙП ВПРАВО//}

}

else {

if (finalPoint.pageY < initialPoint.pageY){

//СВАЙП ВВЕРХ//}

else{

//СВАЙП ВНИЗ//}

}

}

}, false);

Аналогичным образом происходит программирование других популярных действий с тачскрином. Например, Pitch (или щепотка) и Drag’n’Drop (или перетаскивание элемента).

В завершении необходимо перечислить несколько полезных инструментов, способных упростить и визуализировать работу над кодом.

В их числе:

• Fotorama – обладает внушительным функционалом, распространяется бесплатно, поддерживает опцию слайдинга;
• jQ Touch – фреймворк, удобный для создания приложений или игр с использованием функций сенсорного экрана;
• Sencha Touch – еще один фреймворк с аналогичным указанному выше функционалом;
• swip-js – простой, наглядный и очень удобный в работе сенсорный слайдер, использующий обширные возможности JavaScript;
• и другие.

Что почитать по теме?

1. Гайд по touch-событиям от разработчиков браузера Mozilla Firefox.
2. Любительский гайд по написанию программ для адаптации сайта под управление с помощью сенсорного экрана.

Курс «Fullstack-разработчик на Python» от Нетология

Курс «Frontend-разработчик» от Eduson Academy

Курс «Профессия: Web-разработчик» от ProductStar

FAQ

Что понимается под тачскрином?

Тачскрин (от английского touch screen) – сенсорный экран, который предназначен для управления содержимым посредством прикосновений – пальцев или специального инструмента. Практически все современные мобильные устройства оснащаются тачскрином.

Как адаптировать интерфейс сайта для работы с мобильным устройством, имеющим сенсорный экран?

Для этого требуется внести корректировки в существующее ПО, добавив описание функций работы пользователя на сайте с помощью тачскрина. Чаще всего задача решается с помощью языка программирования JavaScript.

Какие основные функции используются для модификации веб-сайта под мобильные устройства с тачскрином?

Функционал управления сайтом посредством тачскрина включает необходимость описания нескольких действий – касания, длительного касания, листания и т.д.

Какие инструменты способны упростить решение задачи для программиста?

В распоряжении начинающих разработчиков находится немало вспомогательных сервисов. В числе наиболее известных нужно отметить такие: Fotorama, jQ Touch, Sencha Touch и swip-js.

Подведем итоги 

1. Быстрый рост количества мобильных устройств, подавляющее большинство которых оснащается сенсорным экраном, требует адаптации веб-сайтов для управления с помощью тачскрина.
2. Наиболее часто задача решается написанием и включением в ПО дополнительного программного кода, написанного на JavaScript.
3. Его содержание включает описание нескольких основных функций – касания, листания, длительного касания и т.д.
4. Написание программы упрощается и ускоряется, если задействовать дополнительные инструменты и сервисы, например, Fotorama или swip-js.