Puutežestid: põhjalik juhend JavaScriptis rakendamiseks

Tänapäeva mobiilikeskses maailmas on puutežestid saanud kasutajakogemuse lahutamatuks osaks. Alates lihtsatest toksatustest kuni keerukate mitme sõrme interaktsioonideni pakuvad puutežestid kasutajatele loomulikku ja intuitiivset viisi veebirakendustega suhtlemiseks. See põhjalik juhend uurib puutežestide maailma ja pakub samm-sammulist lähenemist nende rakendamiseks teie JavaScripti projektides.

Puutesündmuste mõistmine

Enne žestituvastusse sukeldumist on oluline mõista neid interaktsioone võimaldavaid aluseks olevaid puutesündmusi. JavaScript pakub sündmuste kogumit, mis käivituvad, kui kasutaja ekraani puudutab. Need sündmused annavad teavet puudutuse kohta, näiteks selle asukoha ja oleku.

Põhilised puutesündmused:

• touchstart: Käivitatakse, kui puutepunkt asetatakse puutepinnale.
• touchmove: Käivitatakse, kui puutepunkti liigutatakse mööda puutepinda.
• touchend: Käivitatakse, kui puutepunkt eemaldatakse puutepinnalt.
• touchcancel: Käivitatakse, kui puuteinteraktsioon katkestatakse (nt süsteemiteatega).

Kõik need sündmused sisaldavad `touches` omadust, mis on `Touch` objektide loend. Iga `Touch` objekt esindab ühte kontaktpunkti ekraanil ja sisaldab teavet nagu:

• clientX: Puutepunkti horisontaalne koordinaat vaateava suhtes.
• clientY: Puutepunkti vertikaalne koordinaat vaateava suhtes.
• screenX: Puutepunkti horisontaalne koordinaat ekraani suhtes.
• screenY: Puutepunkti vertikaalne koordinaat ekraani suhtes.
• target: DOM-element, mida puudutati.
• identifier: Puutepunkti unikaalne identifikaator (kasulik mitmikpuute interaktsioonide jaoks).

Näide: Puutekoordinaatide logimine

See lihtne näide demonstreerib, kuidas logida puutepunkti koordinaate, kui kasutaja puudutab ekraani:

            
 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Hoiab ära brauseri vaikimisi käitumise (nt kerimise)
  let touch = event.touches[0];
  console.log('Puudutus algas X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

            

              
                Copy
              
            
          

Märkus: `preventDefault()` meetodit kasutatakse sageli selleks, et takistada brauseril vaikimisi puutekäitumise (nagu kerimine või suumimine) sooritamist.

Põhižestide rakendamine

Omades kindlat arusaama puutesündmustest, saame nüüd rakendada põhilisi žeste. Vaatame näiteid nagu toksatus, libistamine ja lohistamine. Neid selgitatakse, defineerides esmalt, mis need on, ja seejärel pakkudes JavaScripti näiteid.

Toksatusžest

Toksatusžest on kiire puudutus ja vabastamine ekraanil. Toksatusžesti rakendamiseks saame jälgida `touchstart` ja `touchend` sündmusi ning mõõta nendevahelist aega. Kui ajavahe on alla teatud läve (nt 200 millisekundit), peame seda toksatuseks.

            
 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('Toksatus tuvastatud!');
  }
 });

            

              
                Copy
              
            
          

Libistamisžest

Libistamisžest on kiire, suunatud liikumine üle ekraani. Libistamise tuvastamiseks peame jälgima puudutuse algus- ja lõppasendit ning arvutama liikumise kauguse ja suuna. Samuti peame arvestama libistamise kestusega.

            
 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) { // Vajadusel kohandage läve
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Libistamine paremale!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Libistamine alla!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Libistamine vasakule!');
   } else {
    console.log('Libistamine üles!');
   }
  }
 });

            

              
                Copy
              
            
          

Lohistamisžest

Lohistamisžest hõlmab elemendi puudutamist ja selle liigutamist üle ekraani. Lohistamisžesti rakendamiseks peame jälgima `touchmove` sündmust ja vastavalt uuendama elemendi asukohta.

            
 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;
 });

            

              
                Copy
              
            
          

Veenduge, et teie HTML-is oleks element ID-ga "draggableElement":

            
 
Lohista mind!

            

              
                Copy
              
            
          

Mitmikpuutežestid

Mitmikpuutežestid hõlmavad mitme sõrme kasutamist ekraaniga suhtlemiseks. See võimaldab keerukamaid ja väljendusrikkamaid interaktsioone, nagu näpistamine suumimiseks ja pööramine.

Näpistamine suumimiseks (Pinch-to-Zoom)

Näpistamine suumimiseks on tavaline žest, mida kasutatakse pildi või kaardi sisse ja välja suumimiseks. Näpistamise rakendamiseks peame jälgima kahe puutepunkti vahelist kaugust ja vastavalt kohandama elemendi skaalat.

            
 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; // Akumuleeri skaleerimine
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Lähtesta järgmise liikumise jaoks
  }
 });

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

            

              
                Copy
              
            
          

Veenduge, et teie HTML-is oleks pilt ID-ga "zoomableImage":

            
 

            

              
                Copy
              
            
          

Pööramine

Pööramine hõlmab elemendi pööramist kahe sõrmega. Pööramise rakendamiseks peame jälgima kahe puutepunkti vahelist nurka ja vastavalt pöörama elementi.

            
 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; // Akumuleeri pööramine
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Lähtesta järgmise liikumise jaoks
  }
 });

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

            

              
                Copy
              
            
          

Veenduge, et teie HTML-is oleks pilt ID-ga "rotatableImage":

            
 

            

              
                Copy
              
            
          

Žestituvastuse teegid

Keerukate žestide nullist rakendamine võib olla keeruline ja aeganõudev. Õnneks on mitmeid JavaScripti teeke, mis võivad žestituvastuse protsessi lihtsustada. Need teegid pakuvad eelnevalt ehitatud žestituvastajaid ja utiliite puutesündmuste käsitlemiseks.

Hammer.js

Hammer.js on populaarne JavaScripti teek žestide tuvastamiseks. See toetab laia valikut žeste, sealhulgas toksatus, topelttoksatus, libistamine, näpistamine, pööramine ja panoraamimine. See on kerge, lihtne kasutada ja väga kohandatav. Hammer.js töötab, kuulates puutesündmusi ja seejärel määrates puutepunktide asukoha ja kestuse põhjal, millist toimingut kasutaja sooritab.

            
 // Kaasake Hammer.js oma HTML-i
 // 

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

 hammer.on('tap', function(event) {
  console.log('Toksatuse sündmus tuvastatud');
 });

 hammer.on('swipe', function(event) {
  console.log('Libistamise sündmus tuvastatud');
  console.log('Libistamise suund: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Näpistamise sündmus tuvastatud');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Pööramise sündmus tuvastatud');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

            

              
                Copy
              
            
          

AlloyFinger

AlloyFinger on veel üks populaarne JavaScripti teek, mis on spetsialiseerunud žestituvastusele, eriti mobiilseadmete jaoks. See on tuntud oma väiksuse ja hea jõudluse poolest. See keskendub tavalistele puutežestidele nagu toksatus, libistamine, näpistamine, pööramine ja vajutamine. See pakub lihtsasti kasutatavat API-d žestide sidumiseks elementidega.

            
 // Kaasake AlloyFinger oma HTML-i
 //  // Asendage oma AlloyFingeri teega

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Toksatuse sündmus tuvastatud');
  },
  swipe: function(evt) {
   console.log('Libistamise sündmus tuvastatud');
   console.log('Libistamise suund: ' + evt.direction); // üles, alla, vasakule, paremale
  },
  pinch: function(evt) {
   console.log('Näpistamise sündmus tuvastatud');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Pööramise sündmus tuvastatud');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

            

              
                Copy
              
            
          

Juurdepääsetavuse kaalutlused

Puutežestide rakendamisel on oluline arvestada puuetega kasutajate juurdepääsetavusega. Mõned kasutajad ei pruugi motoorsete häirete tõttu puutežeste kasutada. Alternatiivsete sisestusmeetodite, näiteks klaviatuuri juhtnuppude või häälkäskluste pakkumine tagab, et teie rakendus on kättesaadav laiemale publikule.

• Klaviatuuriga navigeerimine: Veenduge, et kõikidele interaktiivsetele elementidele oleks võimalik juurde pääseda ja neid käsitseda klaviatuuri abil.
• Ekraanilugeja ühilduvus: Kasutage ARIA atribuute, et pakkuda ekraanilugejatele semantilist teavet puutežestide kohta.
• Piisav kontrast: Veenduge, et teksti ja taustavärvide vahel oleks piisav kontrast, et liides oleks loetav ka vaegnägijatele.
• Puuteala suurus: Veenduge, et puutealad oleksid piisavalt suured (vähemalt 44x44 pikslit), et motoorsete häiretega kasutajad saaksid neid kergesti toksata.

Jõudluse optimeerimine

Puutesündmused võivad olla arvutuslikult kulukad, eriti keerukate žestide käsitlemisel. Koodi jõudluse optimeerimine on sujuva ja reageeriva kasutajakogemuse tagamiseks ülioluline.

• Kasutage sündmuste delegeerimist: Sündmuste kuulajate arvu vähendamiseks lisage sündmuste kuulajad vanem-elemendile, mitte üksikutele elementidele.
• Piirake sündmuste käitlejaid: Jõudlusprobleemide vältimiseks piirake sündmuste käitlejate täitmise sagedust.
• Kasutage requestAnimationFrame: Kasutage `requestAnimationFrame` animatsioonide ja uuenduste ajastamiseks, tagades nende sünkroniseerimise brauseri renderdustsükliga.
• Vältige liigset DOM-i manipuleerimist: Minimeerige DOM-i manipuleerimist, kuna see võib olla jõudluse kitsaskoht.
• Testige reaalsetel seadmetel: Jõudlusprobleemide tuvastamiseks testige oma koodi alati reaalsetel seadmetel. Emulaatorid ei pruugi reaalsete seadmete jõudlust täpselt kajastada.

Brauseriülene ühilduvus

Puutesündmuste tugi varieerub erinevates brauserites ja seadmetes. Brauseriülese ühilduvuse tagamiseks on ülioluline testida oma koodi erinevates brauserites ja seadmetes. Kaaluge polüfillide või teekide kasutamist, mis abstraheerivad brauserite erinevusi.

• Kasutage Modernizr'i: Kasutage Modernizr'i puutesündmuste toe tuvastamiseks ja tagavaramehhanismide pakkumiseks brauseritele, mis ei toeta puutesündmusi.
• Testige erinevatel seadmetel: Testige oma koodi erinevatel seadmetel, sealhulgas nutitelefonidel, tahvelarvutitel ja puutetundlike ekraanidega sülearvutitel.
• Kaaluge polüfiile: Kasutage polüfiile, et pakkuda puutesündmuste tuge vanemates brauserites.

Rahvusvahelistamise (i18n) kaalutlused

Puutežestide rakendamisel ärge unustage arvestada rahvusvahelistamisega (i18n). Kuigi puuteinteraktsioonid ise on üldiselt keele-agnostilised, peaksid ümbritsevad kasutajaliidese elemendid ja tagasisidemehhanismid olema lokaliseeritud erinevate keelte ja piirkondade jaoks.

• Teksti suund: Käsitlege paremalt vasakule (RTL) keeli õigesti. Näiteks võib libistamisžeste RTL-paigutustes vaja olla vastupidiseks pöörata.
• Numbrite ja kuupäevade vormingud: Veenduge, et tagasisidesõnumites kasutatavad numbrid ja kuupäevad oleksid vormindatud vastavalt kasutaja lokaadile.
• Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest žestide tõlgendamisel. Žest, mis on ühes kultuuris tavaline, võib teises olla solvav. Uurige ja kohandage oma disainilahendusi vastavalt.
• Kohandatav kasutajaliides: Veenduge, et teie kasutajaliides suudab kohaneda erinevate tekstipikkustega, kui see on tõlgitud erinevatesse keeltesse. See võib mõjutada puutealade paigutust ja suurust.

Globaalsed näited ja kaalutlused

Vaatame, kuidas puutežeste võidakse erinevates globaalsetes kontekstides erinevalt rakendada:

• E-kaubandus Aasias: Paljud Aasia e-kaubanduse rakendused kasutavad toodete sirvimiseks ja ostmiseks keerukat žestipõhist navigeerimist. Kaaluge sujuvamate puuteinteraktsioonide pakkumist kasutajatele piirkondades, kus andmesideühendus on piiratud.
• Mängimine Ladina-Ameerikas: Mobiilimängud on Ladina-Ameerikas väga populaarsed. Puutejuhtimise optimeerimine kiiretempoliste mängude jaoks on suurepärase kasutajakogemuse tagamiseks oluline.
• Haridus Aafrikas: Puutepõhiseid haridusrakendusi kasutatakse laste õpetamiseks koolides. Lihtsad ja intuitiivsed puutežestid võivad õppimiskogemust parandada.
• Navigeerimine Euroopas: Euroopa kaardirakendused saavad kasu sujuvatest suumimis- ja pööramisžestidest, eriti ajalooliste paikade uurimisel.

Kokkuvõte

Puutežestid on võimas tööriist kaasahaaravate ja intuitiivsete kasutajakogemuste loomiseks. Mõistes aluseks olevaid puutesündmusi ja kasutades sobivaid žestituvastustehnikaid, saate oma JavaScripti projektides rakendada laia valikut žeste. Ärge unustage arvestada juurdepääsetavuse, jõudluse ja brauseriülese ühilduvusega, et tagada teie rakenduse hea toimimine kõigi kasutajate jaoks. Tehnoloogia arenedes oodake uut tüüpi žestide ja interaktsioonide tekkimist, jätkake õppimist, et püsida digitaalsete kogemuste esirinnas.