Dotýkejte se, prosím, jemněji…

Jemnější (a víc „lowlevel“) sledování dotyků nabízí události touch. S nimi můžete sledovat jednotlivé body dotyku a jejich pohyb po ploše, ovšem na druhou stranu musíte například výše popsaná gesta „vydedukovat“ sami, algoritmem. Jediné, co máte k dispozici, jsou totiž jen souřadnice míst, kde se nacházejí uživatelovy prsty.

Při práci s API dotyků zachytáváme následující události:

• ontouchstart – uživatel se dotkl obrazovky
• ontouchmove – uživatel pohybuje prstem po ploše
• ontouchend – uživatel zdvihl prst
• ontouchcancel – pohyb prstem byl systémem přerušen
• ontouchenter – vyvolána, když se prst, který se už dotýká povrchu, přesune do sledovaného elementu (tedy dotyk vznikl někde jinde) 
• ontouchleave – prst opustí sledovaný element

Poslední dvě události ještě většinou nebývají implementované; podle informací je implementuje prohlížeč v Androidu, ale autor bohužel neměl možnost otestovat. V prohlížeči v iPad 2 nejsou k dispozici.

Objekt event, předaný obsluze události, má tyto vlastnosti:

• targetTouches – seznam objektů Touch pro každý dotyk, který započal ve sledovaném objektu
• touches – seznam objektů Touch pro každý dotyk na celé ploše zařízení
• changedTouches – seznam objektů typu Touch pro dotyky, které se účastní události (tj. mění pozici apod.)
• shiftKey, altKey, metaKey, ctrlKey – u dotykových zařízení vybavených klávesnicí obsahují informace o současně stisknutých klávesách Shift, Alt, Meta a Ctrl.

V události jsou tři seznamy objektů typu Touch. Seznamy jsou implementované jako pole, můžeme tedy zjistit počet prvků pomocí vlastnosti length a přistupovat k prvkům přes indexy (například targetTouches[0] )

Každý objekt typu Touch si můžeme představit jako jednu sledovanou „oblast dotyku“. Jakmile se prst (stylus, …) dotkne plochy, vznikne objekt Touch. V něm je identifikátor dané „oblasti dotyku“ a jeho souřadnice v různých souřadných soustavách. Objekt zůstává po celou dobu, co se prst dotýká povrchu, identifikátor je konstantní a mění se pouze souřadnice (pokud se oblast, tedy „prst“, pohybuje). Jakmile prst ztratí kontakt s povrchem, objekt je zrušen a identifikátor zneplatněn.

Objekt Touch nabízí následující vlastnosti:

• clientX, clientY – souřadnice bodu dotyku, vztažené k viewportu
• pageX, pageY – souřadnice bodu dotyku, vztažené k celé stránce
• screenX, screenY – souřadnice bodu dotyku, vztažené k celé obrazovce
• identifier – unikátní identifikátor bodu dotyku
• target – element, pro který byla událost vyvolána
• force, radiusX, radiusY, rotationAngle – Zatím neimplementované součásti návrhu. Budou umožňovat sledování velikosti oblasti, sílu dotyku a natočení prstu.

Sledováním jednotlivých objektů Touch zjistíme, jak se který prst pohybuje po displeji. Můžeme tak nechat uživatele dělat zcela specifická gesta pro naši aplikaci. Problém ale může nastat s jejich vyhodnocením – to je potřeba udělat celé ve vlastní režii, zde systém nepomůže.

Většina frameworků pro práci s mobilními zařízeními má alespoň základní podporu pro dotykové ovládání; některé ale i velmi propracovanou. Popis těchto frameworků si ale necháme na další díly.

Ukázka

Pozměníme příklad z minulé části. Zůstane pokusný žlutý čtverec, ale namísto gest jej budeme přesouvat jedním prstem po ploše. Kód je opět velmi jednoduchý a přímočarý:

"use strict";

var startX=0, startY=0, lastX=0, lastY=0;

function touchstart(e){
  if(e.touches.length == 1){
     var touch = e.touches[0];
    startX = touch.pageX;
    startY = touch.pageY;
    e.preventDefault();
  }
}

function touchmove(e){
  if(e.touches.length == 1){
     var touch = e.touches[0];
    var node = touch.target;
     node.style.position = "absolute";
    node.style.left = (touch.pageX - startX + lastX) + "px";
    node.style.top = (touch.pageY - startY + lastY) + "px";
    e.preventDefault();
  }
}

function touchend(e){
  if(e.changedTouches.length == 1){
     var touch = e.changedTouches[0];
    lastX = touch.pageX - startX + lastX;
    lastY = touch.pageY - startY + lastY;
    e.preventDefault();
  }
}

function onload(){
  var g = document.getElementById("here");
  g.ontouchmove = touchmove;
  g.ontouchstart = touchstart;
  g.ontouchend = touchend;

} 

Na počátku jsou opět inicializovány globální proměnné, kde se ukládá aktuální souřadnice objektu (lastX, lastY) a souřadnice bodu dotyku. Při dotyku (ontouchstart) si poznamenáme pozici prstu a čekáme na pohyb.

Událost ontouchmove zkontroluje, zda se uživatel dotýká stále jen jedním prstem. Pokud ano, spočítá rozdíl aktuální pozice prstu od jeho počáteční pozice při dotyku, a tento rozdíl přičte k původním souřadnicím.

Při dokončení přesunu si musíme poznamenat, kde objekt skončil. Nemůžeme už  však pracovat s objektem touches (po zvednutí prstu je seznam touches prázdný, protože žádný dotyk neprobíhá), ale changedTouches  – tam je informace o posledním změněném (=zdviženém) prstu.

V pokračování si ukážeme, jak řešit vícedotykové ovládání a jak s dotyky pracují používané mobilní JS knihovny.