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

V minulém článku jsme si představili metody pro sledování a zachytávání dotykových gest pro zvětšení, zmenšení a natočení (známá gesta dvěma prsty). V tomto článku přijde na řadu sledování konkrétního dotyku prstu na dotykové ploše a jeho pohybu, a to na velmi nízké úrovni.

Seriál: Dotykové ovládání a JavaScript (3 díly)

  1. Dotýkejte se, prosím… 18.1.2012
  2. Dotýkejte se, prosím, jemněji… 25.1.2012
  3. Dotýkejte se, prosím, na více místech 15.2.2012

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.

Autor děkuje společnosti Czech Computer za laskavé zapůjčení tabletu iPad 2.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Zdroj: https://www.zdrojak.cz/?p=3600