Как работать с тачскрином в 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. Любительский гайд по написанию программ для адаптации сайта под управление с помощью сенсорного экрана.
3. Видео ролик на YouTube «Основы Touch событий на JavaScript. JavaScript v.2.0».
4. Видео ролик на YouTube «Learn JavaScript Touch Events bi 17 Minutes».
5. Видео ролик на YouTube «Build a Touch Slider with HTML, CSS & JavaScript».

FAQ

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

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

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

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

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

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

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

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

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

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