Мобильные устройства такие как сматрфоны или планшеты обычно имеют емкостный экран, чувствительный к прикосновениям для расширенного взаимодействия с пользователем.
С каждым днем мобильные приложения становятся все сложнее и сложнее. Веб-разработчикам тоже нужен API для использования всех возможностей тачскрина. Например, какой-нибудь аркаде или файтингу нужна необходимость нажатья нескольких кнопок, эту возможность может предоставить экран с поддержкой мультитач.
Apple ввел свое touch events API в iOS 2.0, вскоре устройства на Android тоже получили такую возможность и touch events API стал стандартом де-факто. Недавно была собрана рабочая группа W3C для работы над touch events specification.
В этой статье я рассмотрю touch events API, которое нам предоставляют устройства на iOS и Android, мы изучим какие приложения можно создавать, используя touch events API. В статье куча полезных примеров и техник, которые позволяют упростить написание приложений с touch events API.
Мини обзор программы MultiTouch Tester на андроид
События
Эти три основных события представлены в спецификации и поддерживаются многими устройствами:
touchstart: прикосновение к DOM element (аналог mousedown).
touchmove: движение пальца по DOM element (аналог mousemove).
touchend: палец убран с DOM element (аналог mouseup).
Каждое событие включает в себя три списка точек прикосновения (списки пальцев):
touches: список всех точек прикосновения на экране.
targetTouches: список точек на текущем элементе.
changedTouches: список пальцев, участвующих в текущем событии. Например, в событии touchend это тот палец, который был убран.
Каждый элемент списка представляет из себя объект формата:
identifier: уникальный идентификатор пальца, который сейчас на течскрине
target: DOM element, который является целью события
координаты client/page/screen: точка возникновения события на экране
radius и rotationAngle: эллипс, который описывает форму пальца
Приложения с поддержкой прикосновений
События touchstart, touchmove и touchend предоставляют достаточно мощный API для создания любых взаимодействий, основанных на прикосновении включая все обычные мультитач жесты — зум, вращение и так далее.
Этот пример позволяет вам перетаскивать DOM element, используя одноточечное прикосновение:
var obj = document.getElementById(‘id’); obj.addEventListener(‘touchmove’, function(event) < // Если 1 палец внутри элемента if (event.targetTouches.length == 1) < var touch = event.targetTouches[0]; // Place element where the finger is obj.style.left = touch.pageX + ‘px’; obj.style.top = touch.pageY + ‘px’; >>, false);
Ниже есть пример, который отображает все прикосновения на экране.
Картинка кликабильна
Вот его код:
// Выше мы создали canvas canvas.addEventListener(‘touchmove’, function(event) < for (var i = 0; i < event.touches.length; i++) < var touch = event.touches[i]; ctx.beginPath(); ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true); ctx.fill(); ctx.stroke(); >>, false);
Демки
Multitouch Coffee Table with Android
Появилось уже большое количество приложений с поддержкой мультитач, одно из них рисовалка, основанная на canvas, созданная Paul Irish
И демка Browser Ninja — клон Fruit Ninja, использующая CSS3 transforms, transitions и canvas:
Важные Моменты
Предотвращение зума
Настройки по умолчанию не очень подходят для мультитач, часто ваши движения пальцами воспринимаются мобильным браузером как команды для зума или скролла.
Для отключения зума вам необходимо приписать следующий мета-тег:
Предотвращение скролла
Некоторые мобильные устройства имеют поведение по умолчанию для жеста «скролл» (touchmove), такие как классический оверскролл в iOS, что приводит к возвращению страницы назад, если скролл превысил допустимые рамки. Это сбивает с толку в мультитач приложениях, но может быть легко отключено:
document.body.addEventListener(‘touchmove’, function(event) < event.preventDefault(); >, false);
Рисуйте аккуратно
Если вы пишете мультитач приложение, которое включается в себя сложное многопальцевые жесты, то будьте осторожны с ними так как вы будете получать очень много событий. Рассмотрим предыдущий пример, в котором рисовались все точки прикосновения. Вы можете это сделать таким образом:
canvas.addEventListener(‘touchmove’, function(event) < renderTouches(event.touches); >, false);
Этот метод не масштабируется с числом пальцев на экране. Вместо этого вы можете использовать цикл для отрисовки всех пальцев и получения значительно лучше производительности:
var touches = [] canvas.addEventListener(‘touchmove’, function(event) < touches = event.touches; >, false); // Таймер 60fps timer = setInterval(function() < renderTouches(touches); >, 15);
Таймеры на setInterval — это не очень хороший способ для создания анимаций, т.к. он не синхронизируется с циклом перерисовки браузера. Современные десктопные браузеры предоставляют функцию requestAnimationFrame, которая лучше подходит для цикличных анимаций — она производительней и тратит меньше батареи. Как только она будет поддерживаться всеми современными браузерами использование setInterval будет плохим тоном.
Использование targetTouches и changedTouches
Важно понять, что event.touches это массив всех пальцев, которые контактируют с экраном, не только те, что касаются DOM element’а. Наиболее подходящим обычно является event.targetTouches или event.changedTouches.
Наконец, если вы разрабатываете под мобильные устройства, вы должны знать важные моменты, которые описаны в статье Eric Bidelman и в документе W3C.
Поддержка устройств
К сожалению не все устройство поддерживают события прикосновения в должном качестве. Я написал скрипт для диагностики, который отображает информацию о поддержке touch API тем или иным устройством, а также точность touchmove. Я протестировал Android 2.3.3 на Nexus One и Nexus S, Android 3.0.1 на Xoom, и iOS 4.2 на iPad и iPhone.
В двух словах, все эти браузеры поддерживают touchstart, touchend, и touchmove.
В спецификации описаны ещё 3 события, но ни один из браузеров не поддерживает их:
touchenter: палец входи в DOM element.
touchleave: палец покидает DOM element.
touchcancel: касание прервано (зависит от реализации).
Все протестированные браузеры также предоставляют списки прикосновений — touches, targetTouches и changedTouches. Однако, ни один из браузеров не поддерживает ни radiusX ни radiusY ни rotationAngle, которые определяют форму пальца.
Событие touchmove, срабатывает порядка 60 раз в секунду на всех протестированных устройствах.
Android 2.3.3 (Nexus)
В браузере Android Gingerbread (Nexus One и Nexus S) отсутствует поддержка multi-touch. Это известная проблема.
Android 3.0.1 (Xoom)
В браузере Xoom есть поддержка мультитача, но она работает только на одном DOM элементе. Браузер не может корректно обработать два параллельных события на разных DOM элементах. Другими словами, следующий код будет обрабатывает два параллельных события:
obj1.addEventListener(‘touchmove’, function(event) < for (var i = 0; i < event.targetTouches; i++) < var touch = event.targetTouches[i]; console.log(‘touched ‘ + touch.identifier); >>, false);
А вот этот нет:
var objs = [obj1, obj2]; for (var i = 0; i < objs.length; i++) < var obj = objs[i]; obj.addEventListener(‘touchmove’, function(event) < if (event.targetTouches.length == 1) < console.log(‘touched ‘ + event.targetTouches[0].identifier); >>, false); >
iOS 4.x (iPad, iPhone)
Устройства на iOS в полной мере поддерживают Touch API.
Инструменты разработчика
В мобильной разработке всегда проще прототипировать на компьютере и по необходимости использовать живое мобильное устройство для теста. Мультитач это одна из всех вещей, которую сложно протестировать на обычном ПК, т.к многие ПК не поддерживают мультитач.
Необходимость тестирования на мобильных устройствах может увеличить цикл разработки, т.к. каждое изменение вы должны залить на сервер, а затем на устройство (прим. пер. Очень сомнительное затруднение). На мобильных устройствах отсутствуют необходимые инструменты разработчика.
Решение этой проблемы — симулирование события прикосновения на вашем ПК. Одноточечное прикосновение можно симулировать мышкой. Мультитач может быть симулирован на устройствах с поддержкой мулититач, например на новых Apple MacBook.
Одноточечные события
Если вы желаете симулировать одноточечное событие на вашем ПК, то попробуйте Phantom Limb, которая симулирует события прикосновения на страницах.
Также существует плагин Touchable для jQuery, который обединяет события мыши и прикосновения.
Мультитач события (решение только для MAC)
Для того, чтобы включить возможность обработки мультитач событий в вашем браузере, используя мультитач устройства (Apple MacBook или MagicPad). Я создал MagicTouch.js он отлавливает события от вашего trackpad и конвертирует их в события совместимые со стандартом.
Для начала работы:
1. Скачайте и установите плагин npTuioClient NPAPI в ~/Library/Internet Plug-Ins/.
2. Скачайте приложение TongSeng TUIO для MagicPad и запустите сервер.
3. Скачайте JavaScript библиотеку MagicTouch.js для симуляции событий прикосновения, совместимых со стандартом.
4. Подключите magictouch.js и плагин npTuioClient:
. . Touch input plugin failed to load!
Я тестировал этот метод только в Chrome 10, но он должен работать и в других современных браузерах.
Если ваш ПК не поддерживает мультитач вы можете симулировать события прикосновения, используетя другие TUIO трекеры такие как reacTIVision. Подробная информация доступна на сайте проекта TUIO.
Ваши жесты могут пересекаться с жестами OS. На OS X вы можете настроить системные события в System Preferences > Trackpad
Мультитач события поддерживаются все большим числом мобильных браузеров, Я очень рад, что новые веб-приложения используют этот API в полную силу.
От переводчика
В комментариях к оригинальной статье также проскакивала ссылка: Touching and Gesturing on the iPhone
Предложения, пожелания, критика приветствуется!
Источник: habr.com
Мультитач тест
Проверьте возможности мультитач вашего устройства с помощью этого простого теста. Он показывает, сколько касаний вы делаете одновременно.
Коснитесь экрана внутри черной рамки. Нажмите кнопку полноэкранного режима в правом нижнем углу поля, чтобы растянуть его на весь экран.
Как проверить мультитач экрана?
Коснитесь экрана внутри поля выше, чтобы начать проверку. Верхнее число показывает, сколько касаний вы делаете в данный момент. Нижнее число показывает, сколько касаний одновременно вы сделали больше всего.
Используйте полноэкранную кнопку в правом нижнем углу тестового поля, чтобы разместить больше пальцев.
Этот мультитач-тест можно использовать только на сенсорных экранах в таких браузерах, как Chrome Mobile, Safari Mobile и т. д. Если ваш браузер или устройство не поддерживаются, это будет показано в специальном сообщении в красном поле.
Какое максимальное количество касаний вы можете получить?
Стандартом для дисплеев смартфонов с функцией мультитач в настоящее время является 10 одновременных касаний, но некоторые могут обрабатывать даже больше, например, 11 или даже до 20. Вам, вероятно, не нужно столько, потому что обычно у людей всего 10 пальцев…
Источник: cps-check.com
MultiTouch Tester 1.2
MultiTouch Tester — программа для тестирования мультитача экрана смартфона.
Подписывайтесь на наш Телеграм
Лучший Telegram-канал про технологии (возможно)
Скачать MultiTouch Tester 1.2
140,1 КБ
Проверен Вирусы не найдены QR Разрешения (2)
Android 2.2+
Все платформы
Скачать MultiTouch Tester 1.0
85,3 КБ
Проверен Вирусы не найдены QR Разрешения (0)
Android 2.0+
Все платформы
Последнее изменение: 16 марта 2015, 12:47
Android 7.0 и выше
Android 5.0 и выше
Android 4.1 и выше
Android 2.3 и выше
speed8 , 13 марта 2015, 12:06 # (. )
- Добавлена поддержка аппаратного ускорения
- Рекомендуются новые приложения от разработчика
Добавить комментарий
Если нужно ответить кому-то конкретно,
лучше нажать на «Ответить» под его комментарием
Обсуждаемое сегодня
Xiaomi представила смартфон для женщин — Civi 3. Теперь мужчины хотят такой же
Быстрый интернет в каждый дом: к 2035 году всем россиянам обещают скорость от 1 Гбит/с
Учёные создали кальциевую батарею, она сохраняет 92% ёмкости после 500 циклов заряда
Huawei полностью переосмыслила формат TWS-наушников: обзор FreeBuds 5
Этот необычный Xiaomi будет у каждого третьего в метро. Вот чем он хорош (и плох)
Первый взгляд на фотофлагманы Huawei P60 и P60 Pro: Переосмысление и обновление инновационных технологий
Обзоры на Trashbox.ru
Источник: trashbox.ru