Как работать с тачскрином в 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. Любительский гайд по написанию программ для адаптации сайта под управление с помощью сенсорного экрана.

FAQ

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

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

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

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

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

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

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

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

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

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