Вступ

Мобільні пристрої, такі як смартфони і планшетні ПК, часто оснащені сенсорним екраном, з яким користувач взаємодіє за допомогою торкань. Мобільні додатки стають все складніше і багатше, і розробникам потрібні механізми, які дозволили б ефективно обробляти події торкання. Наприклад, у багатьох іграх потрібно натискати кілька клавіш одночасно - в контексті сенсорного екрану це означає дотик відразу в декількох точках.

Компанія Apple представила API обробки торкань в iOS 2.0, розробники Android також щільно працюють в цій галузі, так що обробка торкань, за великим рахунком, стає стандартом. Не так давно робоча група W3C підготувала специфікацію подій торкання .

У цій статті описуються API обробки торкань для пристроїв iOS і Android. Ми поговоримо про те, які програми можна створити з їхньою допомогою, а також розглянемо кілька прикладів і корисних технік, які допоможуть вам створити власні програми для пристроїв з сенсорними екранами.

події торкання

У специфікації визначені три основних події торкання, які широко застосовуються в мобільних додатках:

• touchstart: користувач торкається до елементу DOM.
• touchmove: користувач перетягує елемент DOM.
• touchend: користувач відпускає елемент DOM.

Кожна подія включає три списки торкань.

• touches: список всіх точок дотику пальців з екраном.
• targetTouches: список всіх точок дотику з поточним елементом DOM.
• changedTouches: список всіх точок дотику, що беруть участь в поточному подію. Наприклад, в разі події touchend це буде точка, в якій користувач прибрав палець з екрана.

Ці списки складаються з об'єктів, що містять відомості про торкання.

• identifier: унікальне число, що визначає поточну точку в рамках сеансу торкання.
• target: елемент DOM, що є цільовим для даної дії.
• Координати клієнта, сторінки або екрана: координати точки, в якій сталося дію.
• Координати радіусу і rotationAngle: координати еліпса, відповідного формі пальця.

сенсорні додатки

Події touchstart, touchmove і touchend пропонують достатньо можливостей для підтримки практично будь-якої взаємодії з сенсорним екраном, включаючи всі стандартні дії, такі як масштабування, поворот та інші.

Нижче показаний код, що дозволяє перетягувати елемент DOM одним пальцем.

var obj = document.getElementById ( 'id'); obj.addEventListener ( 'touchmove', function (event) {// If there's exactly one finger inside this element 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);

А от приклад , Де показані всі поточні точки дотику з екраном. Ця ілюстрація дозволяє краще зрозуміти принцип реагування пристрою.

// Setup canvas and expose context via ctx variable 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);

демонстраційні приклади

Існує багато цікавих прикладів використання технології мультисенсорного введення, таких як додаток для малювання на полотні , Створене Полом Айріш:

Ще один приклад - Browser Ninja , Клон гри Fruit Ninja, який використовує переходи CSS3 і елемент canvas:

рекомендації

заборона масштабування

Налаштування за замовчуванням краще не використовувати, тому що багато жести, такі як прокрутка і масштабування, часто пов'язані з поведінкою браузера.

Щоб відключити масштабування, необхідно налаштувати область перегляду так, щоб користувач не міг самостійно зменшувати або збільшувати її. Для цього використовується спеціальний метатег:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no"> В цієї статті про HTML5 для мобільних додатків можна знайти додаткову інформацію про налаштування області перегляду.

заборона прокрутки

У деяких мобільних пристроях для події 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); // Setup a 60fps timer timer = setInterval (function () {renderTouches (touches);}, 15);

Порада. Чи не рекомендуємо використовувати для анімації метод setInterval, так як він не враховує власний цикл обробки браузера. Сучасні комп'ютерні браузери підтримують метод requestAnimationFrame , Який виконує обробку швидше і вимагає менше ресурсів акумулятора. Залишається дочекатися дня, коли його почнуть підтримувати і мобільні браузери.

Ефективне використання списків targetTouches і changedTouches

Пам'ятайте, що event.touches - це масив ВСІХ точок дотику пальців з екраном, а не тільки тих, які збігаються з цільовими елементами DOM. Замість цього може бути зручніше використовувати event.targetTouches або event.changedTouches.

Розробляючи програми для мобільних пристроїв, ознайомтеся з тематичними рекомендаціями, наведеними в статті Еріка Біделмана і в документі W3C .

підтримка пристроїв

На жаль, реалізація подій торкання істотно відрізняється від пристрою до пристрою. Я написав діагностичний скрипт , Який виводить основну інформацію про реалізацію API торкань, в тому числі про підтримувані події і обробці події touchmove. Я тестував браузери на наступних платформах: Android 2.3.3 на пристроях Nexus One і Nexus S, Android 3.0.1 на пристрої Xoom і iOS 4.2 на пристроях iPad і iPhone.

Всі протестовані браузери підтримують події touchstart, touchend і touchmove.

У специфікації зазначені ще три події торкання, однак протестовані браузери їх не підтримують.

• touchenter: рухається по екрану палець наводиться на елемент DOM.
• touchleave: рухається по екрану палець виходить за межі елементу DOM.
• touchcancel: дотик перервано (залежить від реалізації).

Протестовані браузери також пропонують списки touches, targetTouches і changedTouches, проте жоден з них не підтримує координати radiusX, radiusY і rotationAngle, які визначають форму пальця, що стосується екрану.

На всіх протестованих пристроях під час події touchmove події викликаються зі швидкістю близько 60 разів на секунду.

Android 2.3.3 (Nexus)

Браузер Android Gingerbread (тестувався на пристроях Nexus One і Nexus S) не підтримує технологію мультисенсорного введення. Ця проблема відома розробникам .

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 підтримують технологію мультисенсорного введення в повному обсязі. Вони здатні відстежувати торкання відразу декількох пальців, а браузер обробляє такі події дуже якісно.

Інструменти розробника

При розробці мобільних додатків буває зручно створити прототип на настільному ПК, а потім підправити окремі елементи, які в мобільній версії повинні бути реалізовані інакше з урахуванням особливостей пристроїв. Технологію мультисенсорного введення складно тестувати на настільних ПК, так як більшість з них не мають сенсорних екранів.

Необхідність тестування на мобільних пристроях подовжує цикл розробки, так як після внесення кожної зміни необхідно спочатку відправити додаток на сервер, а потім завантажити на пристрій. Тому, коли програма вже запущено, його налагодження практично неможлива, так як на планшетних ПК і смартфонах інструменти веб-розробки відсутні.

Рішенням може бути імітація подій торкання на комп'ютері, на якому ви розробляєте додаток. Для імітації одного дотику досить миші, але для імітації декількох торкань краще використовувати пристрої з сенсорним екраном, такі як нові ноутбуки MacBook виробництва Apple.

Імітація одного дотику

Щоб імітувати єдине дотик на настільному ПК, за допомогою програми Phantom Limb , Яке імітує події торкання на сторінках і відображає замість покажчика миші величезну руку.

Також існує модуль Touchable від jQuery, який об'єднує події миші і торкання на різних платформах.

Імітація мультисенсорного введення

Щоб веб-додаток могло обробляти кілька торкань в браузері на базі трекпада (наприклад, на пристрої Apple MacBook або MagicPad), я написав бібліотеку MagicTouch.js . Вона реєструє події торкання на трекпаді і переводить їх в стандартні події торкання.

1. Завантажити та встановити модуль npTuioClient NPAPI в каталог ~ / Library / Internet Plug-Ins /.
2. завантажте додаток TongSeng TUIO для влаштування MagicPad і запустіть сервер.
3. завантажте MagicTouch.js - бібліотеку JavaScript, яка дозволяє імітувати стандартні події торкання на основі подій, що повертаються підключається модулем npTuioClient.
4. Щоб вбудувати magictouch.js і npTuioClient в свій додаток, використовуйте наступний код:

<Head> ... <script src = "/ path / to / magictouch.js"> </ script> </ head> <body> ... <object id = "tuio" type = "application / x-tuio "style =" width: 0px; height: 0px; "> Touch input plugin failed to load! </ Object> </ body>

Я тестував цей код тільки в браузері Chrome 10, але він повинен працювати і в інших сучасних браузерах (можуть знадобитися невеликі правки).

Якщо ваш комп'ютер не підтримує введення інформації декількома дотиками, використовуйте для імітації таких подій трекери TUIO, такі як reacTIVision . Додаткові відомості представлені на сайті проекту TUIO .

Не забувайте, що використовуються вами жести можуть збігатися з жестами, запрограмованими на рівні операційної системи. В OS X події на рівні системи визначаються на панелі налаштувань трекпада в розділі системних налаштувань.

Технологію мультисенсорного введення підтримує все більше і більше браузерів, і я з нетерпінням чекаю дня, коли в нових веб-додатках можна буде використовувати всі можливості цього API.