M

MLOG

Čeština

Naučte se implementovat dotyková gesta v JavaScriptu. Tento průvodce pokrývá základní události i pokročilé techniky rozpoznávání gest.

Dotyková gesta: Komplexní průvodce implementací v JavaScriptu

V dnešním světě, kde mobilní zařízení hrají prim, se dotyková gesta stala nedílnou součástí uživatelského prožitku. Od jednoduchých klepnutí po složité interakce více prsty poskytují dotyková gesta přirozený a intuitivní způsob, jak mohou uživatelé interagovat s webovými aplikacemi. Tento komplexní průvodce prozkoumává svět dotykových gest a poskytuje podrobný postup pro jejich implementaci ve vašich JavaScriptových projektech.

Porozumění dotykovým událostem

Než se ponoříme do rozpoznávání gest, je klíčové porozumět základním dotykovým událostem, které tyto interakce pohánějí. JavaScript poskytuje sadu událostí, které se spouštějí, když se uživatel dotkne obrazovky. Tyto události poskytují informace o dotyku, jako je jeho poloha a stav.

Základní dotykové události:

Každá z těchto událostí obsahuje vlastnost `touches`, což je seznam objektů `Touch`. Každý objekt `Touch` představuje jeden bod kontaktu na obrazovce a obsahuje informace jako:

Příklad: Logování souřadnic dotyku

Tento jednoduchý příklad ukazuje, jak logovat souřadnice dotykového bodu, když se uživatel dotkne obrazovky:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Zabraňuje výchozímu chování prohlížeče (např. posouvání)
  let touch = event.touches[0];
  console.log('Dotyk začal na X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Poznámka: Metoda `preventDefault()` se často používá k zabránění výchozího chování prohlížeče při dotyku, jako je posouvání nebo přibližování.

Implementace základních gest

S dobrým porozuměním dotykovým událostem můžeme nyní implementovat základní gesta. Podívejme se na příklady jako klepnutí, přejetí a přetažení. Tyto budou vysvětleny tak, že nejprve definujeme, co jsou, a poté poskytneme příklady v JavaScriptu.

Gesto klepnutí (Tap)

Gesto klepnutí je rychlý dotyk a uvolnění na obrazovce. Pro implementaci gesta klepnutí můžeme sledovat události `touchstart` a `touchend` a měřit časový rozdíl mezi nimi. Pokud je časový rozdíl pod určitou hranicí (např. 200 milisekund), považujeme to za klepnutí.


 let tapStartTime = null;

 document.addEventListener('touchstart', function(event) {
  tapStartTime = new Date().getTime();
 });

 document.addEventListener('touchend', function(event) {
  let tapEndTime = new Date().getTime();
  let tapDuration = tapEndTime - tapStartTime;

  if (tapDuration < 200) {
   console.log('Klepnutí detekováno!');
  }
 });

Gesto přejetí (Swipe)

Gesto přejetí je rychlý, směrovaný pohyb po obrazovce. Pro detekci přejetí musíme sledovat počáteční a koncovou pozici dotyku a vypočítat vzdálenost a směr pohybu. Musíme také zohlednit dobu trvání přejetí.


 let swipeStartX = null;
 let swipeStartY = null;

 document.addEventListener('touchstart', function(event) {
  swipeStartX = event.touches[0].clientX;
  swipeStartY = event.touches[0].clientY;
 });

 document.addEventListener('touchend', function(event) {
  let swipeEndX = event.changedTouches[0].clientX;
  let swipeEndY = event.changedTouches[0].clientY;
  let deltaX = swipeEndX - swipeStartX;
  let deltaY = swipeEndY - swipeStartY;
  let swipeDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (swipeDistance > 50) { // Prahovou hodnotu upravte podle potřeby
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Přejetí doprava!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Přejetí dolů!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Přejetí doleva!');
   } else {
    console.log('Přejetí nahoru!');
   }
  }
 });

Gesto přetažení (Drag)

Gesto přetažení zahrnuje dotyk prvku a jeho přesouvání po obrazovce. K implementaci gesta přetažení musíme sledovat událost `touchmove` a podle toho aktualizovat pozici prvku.


 let dragging = false;
 let offsetX, offsetY;
 let element = document.getElementById('draggableElement');

 element.addEventListener('touchstart', function(event) {
  dragging = true;
  offsetX = event.touches[0].clientX - element.offsetLeft;
  offsetY = event.touches[0].clientY - element.offsetTop;
 });

 document.addEventListener('touchmove', function(event) {
  if (dragging) {
   element.style.left = (event.touches[0].clientX - offsetX) + 'px';
   element.style.top = (event.touches[0].clientY - offsetY) + 'px';
  }
 });

 document.addEventListener('touchend', function(event) {
  dragging = false;
 });

Ujistěte se, že máte ve svém HTML souboru prvek s id "draggableElement":


 
Přetáhni mě!

Vícedotyková gesta (Multi-Touch)

Vícedotyková gesta zahrnují použití více prstů k interakci s obrazovkou. To umožňuje složitější a výraznější interakce, jako je přiblížení sevřením prstů (pinch-to-zoom) a otáčení.

Přiblížení sevřením prstů (Pinch-to-Zoom)

Přiblížení sevřením prstů je běžné gesto používané k přibližování a oddalování obrázku nebo mapy. K implementaci tohoto gesta musíme sledovat vzdálenost mezi dvěma dotykovými body a podle toho upravovat měřítko prvku.


 let initialDistance = null;
 let currentScale = 1;
 let element = document.getElementById('zoomableImage');

 function getDistance(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  let x = touch2.clientX - touch1.clientX;
  let y = touch2.clientY - touch1.clientY;
  return Math.sqrt(x * x + y * y);
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialDistance = getDistance(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentDistance = getDistance(event);
   let scaleFactor = currentDistance / initialDistance;
   currentScale *= scaleFactor; // Akumulace škálování
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Reset pro další pohyb
  }
 });

 element.addEventListener('touchend', function(event) {
  initialDistance = null;
 });

Ujistěte se, že máte ve svém HTML souboru obrázek s id "zoomableImage":

Otáčení (Rotation)

Otáčení zahrnuje rotaci prvku pomocí dvou prstů. Pro implementaci otáčení musíme sledovat úhel mezi dvěma dotykovými body a podle toho otáčet prvek.


 let initialAngle = null;
 let currentRotation = 0;
 let element = document.getElementById('rotatableImage');

 function getAngle(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  return Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX) * 180 / Math.PI;
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialAngle = getAngle(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentAngle = getAngle(event);
   let rotation = currentAngle - initialAngle;
   currentRotation += rotation; // Akumulace rotace
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Reset pro další pohyb
  }
 });

 element.addEventListener('touchend', function(event) {
  initialAngle = null;
 });

Ujistěte se, že máte ve svém HTML souboru obrázek s id "rotatableImage":

Knihovny pro rozpoznávání gest

Implementace složitých gest od nuly může být náročná a časově zdlouhavá. Naštěstí existuje několik JavaScriptových knihoven, které mohou proces rozpoznávání gest zjednodušit. Tyto knihovny poskytují předpřipravené rozpoznávače gest a nástroje pro zpracování dotykových událostí.

Hammer.js

Hammer.js je populární JavaScriptová knihovna pro rozpoznávání gest. Podporuje širokou škálu gest, včetně klepnutí, dvojitého klepnutí, přejetí, sevření, otáčení a posouvání. Je lehká, snadno použitelná a vysoce přizpůsobitelná. Hammer.js funguje tak, že naslouchá dotykovým událostem a poté na základě polohy a délky trvání dotykových bodů určuje, jakou akci uživatel provádí.


 // Vložte Hammer.js do svého HTML
 // 

 let element = document.getElementById('myElement');
 let hammer = new Hammer(element);

 hammer.on('tap', function(event) {
  console.log('Detekována událost klepnutí');
 });

 hammer.on('swipe', function(event) {
  console.log('Detekována událost přejetí');
  console.log('Směr přejetí: ' + event.direction);
 });

 hammer.get('pinch').set({ enable: true });
 hammer.get('rotate').set({ enable: true });

 hammer.on('pinch', function(event) {
  console.log('Detekována událost sevření');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Detekována událost otočení');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger je další populární JavaScriptová knihovna specializující se na rozpoznávání gest, zejména pro mobilní zařízení. Je známá svou malou velikostí a dobrým výkonem. Zaměřuje se na běžná dotyková gesta jako klepnutí, přejetí, sevření, otáčení a stisknutí. Poskytuje snadno použitelné API pro přiřazení gest k prvkům.


 // Vložte AlloyFinger do svého HTML
 //  // Nahraďte cestou k vašemu souboru AlloyFinger

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Detekována událost klepnutí');
  },
  swipe: function(evt) {
   console.log('Detekována událost přejetí');
   console.log('Směr přejetí: ' + evt.direction); // up, down, left, right
  },
  pinch: function(evt) {
   console.log('Detekována událost sevření');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Detekována událost otočení');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Aspekty přístupnosti

Při implementaci dotykových gest je nezbytné zvážit přístupnost pro uživatele se zdravotním postižením. Někteří uživatelé nemusí být schopni používat dotyková gesta kvůli motorickým omezením. Poskytnutí alternativních metod zadávání, jako je ovládání klávesnicí nebo hlasové příkazy, zajistí, že vaše aplikace bude přístupná širšímu publiku.

Optimalizace výkonu

Dotykové události mohou být výpočetně náročné, zejména při zpracování složitých gest. Optimalizace kódu pro výkon je klíčová pro zajištění plynulého a responzivního uživatelského prožitku.

Kompatibilita napříč prohlížeči

Podpora dotykových událostí se liší napříč různými prohlížeči a zařízeními. Je klíčové testovat váš kód na různých prohlížečích a zařízeních, aby byla zajištěna kompatibilita. Zvažte použití polyfillů nebo knihoven, které abstrahují rozdíly mezi prohlížeči.

Aspekty internacionalizace (i18n)

Při implementaci dotykových gest nezapomeňte zvážit internacionalizaci (i18n). Zatímco samotné dotykové interakce jsou obecně jazykově nezávislé, okolní prvky uživatelského rozhraní a mechanismy zpětné vazby by měly být lokalizovány pro různé jazyky a regiony.

Globální příklady a úvahy

Pojďme se podívat, jak mohou být dotyková gesta aplikována odlišně v různých globálních kontextech:

Závěr

Dotyková gesta jsou mocným nástrojem pro vytváření poutavých a intuitivních uživatelských prožitků. Porozuměním základním dotykovým událostem a použitím vhodných technik rozpoznávání gest můžete ve svých JavaScriptových projektech implementovat širokou škálu gest. Nezapomeňte zvážit přístupnost, výkon a kompatibilitu napříč prohlížeči, abyste zajistili, že vaše aplikace bude dobře fungovat pro všechny uživatele. S postupujícím technologickým vývojem očekávejte nové typy gest a interakcí; pokračujte v učení, abyste zůstali v čele digitálních prožitků.