M

MLOG

Lietuvių

Išsamus vadovas apie lietimo gestų įgyvendinimą JavaScript. Mokykitės nuo pagrindinių lietimo įvykių iki pažangių gestų atpažinimo technikų.

Lietimo Gestai: Išsamus JavaScript Įgyvendinimo Vadovas

Šiuolaikiniame, visų pirma mobiliesiems pritaikytame pasaulyje, lietimo gestai tapo neatsiejama vartotojo patirties dalimi. Nuo paprastų bakstelėjimų iki sudėtingų kelių pirštų sąveikų, lietimo gestai suteikia vartotojams natūralų ir intuityvų būdą sąveikauti su interneto programomis. Šis išsamus vadovas tyrinėja lietimo gestų pasaulį ir pateikia žingsnis po žingsnio metodą, kaip juos įgyvendinti savo JavaScript projektuose.

Lietimo Įvykių Supratimas

Prieš pradedant gilintis į gestų atpažinimą, labai svarbu suprasti pagrindinius lietimo įvykius, kurie valdo šias sąveikas. JavaScript suteikia įvykių rinkinį, kurie suaktyvinami, kai vartotojas paliečia ekraną. Šie įvykiai pateikia informaciją apie lietimą, pavyzdžiui, jo vietą ir būseną.

Pagrindiniai Lietimo Įvykiai:

Kiekvienas iš šių įvykių turi `touches` savybę, kuri yra `Touch` objektų sąrašas. Kiekvienas `Touch` objektas atspindi vieną kontaktinį tašką ekrane ir apima tokią informaciją kaip:

Pavyzdys: Lietimo Koordinačių Registravimas

Šis paprastas pavyzdys parodo, kaip registruoti lietimo taško koordinates, kai vartotojas paliečia ekraną:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Apsaugo nuo numatytosios naršyklės elgsenos (pvz., slinkimo)
  let touch = event.touches[0];
  console.log('Lietimas prasidėjo X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Pastaba: `preventDefault()` metodas dažnai naudojamas norint užkirsti kelią naršyklei atlikti numatytąjį lietimo veiksmą, pavyzdžiui, slinkimą ar mastelio keitimą.

Pagrindinių Gestų Įgyvendinimas

Gerai suprasdami lietimo įvykius, dabar galime įgyvendinti pagrindinius gestus. Pažvelkime į pavyzdžius, tokius kaip bakstelėjimas, perbraukimas ir vilkimas. Jie bus paaiškinti pirmiausia apibrėžiant, kas jie yra, o po to pateikiant Javascript pavyzdžius.

Bakstelėjimo Gestas

Bakstelėjimo gestas yra greitas lietimas ir atleidimas ekrane. Norėdami įgyvendinti bakstelėjimo gestą, galime sekti `touchstart` ir `touchend` įvykius ir išmatuoti laiko skirtumą tarp jų. Jei laiko skirtumas yra mažesnis už tam tikrą ribą (pvz., 200 milisekundžių), laikome tai bakstelėjimu.


 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('Aptiktas bakstelėjimas!');
  }
 });

Perbraukimo Gestas

Perbraukimo gestas yra greitas, kryptingas judesys per ekraną. Norėdami aptikti perbraukimą, turime sekti lietimo pradžios ir pabaigos pozicijas ir apskaičiuoti judesio atstumą bei kryptį. Taip pat turime atsižvelgti į perbraukimo trukmę.


 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) { // Prireikus pakoreguokite slenkstį
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Perbraukimas į dešinę!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Perbraukimas žemyn!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Perbraukimas į kairę!');
   } else {
    console.log('Perbraukimas aukštyn!');
   }
  }
 });

Vilkimo Gestas

Vilkimo gestas apima elemento palietimą ir jo judinimą per ekraną. Norėdami įgyvendinti vilkimo gestą, turime sekti `touchmove` įvykį ir atitinkamai atnaujinti elemento poziciją.


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

Įsitikinkite, kad jūsų HTML faile yra elementas su ID „draggableElement“:


 
Vilk Mane!

Kelių Lietimų Gestai

Kelių lietimų gestai apima kelių pirštų naudojimą sąveikaujant su ekranu. Tai leidžia atlikti sudėtingesnes ir išraiškingesnes sąveikas, tokias kaip suėmimas masteliui keisti (pinch-to-zoom) ir sukimas.

Suėmimas Masteliui Keisti (Pinch-to-Zoom)

Suėmimas masteliui keisti yra įprastas gestas, naudojamas norint priartinti ar nutolinti vaizdą ar žemėlapį. Norėdami įgyvendinti suėmimo gestą, turime sekti atstumą tarp dviejų lietimo taškų ir atitinkamai koreguoti elemento mastelį.


 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; // Kaupkite mastelio keitimą
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Nustatykite iš naujo kitam judesiui
  }
 });

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

Įsitikinkite, kad jūsų HTML faile yra paveikslėlis su ID „zoomableImage“:

Sukimas

Sukimas apima elemento sukimą dviem pirštais. Norėdami įgyvendinti sukimą, turime sekti kampą tarp dviejų lietimo taškų ir atitinkamai sukti elementą.


 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; // Kaupkite sukimą
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Nustatykite iš naujo kitam judesiui
  }
 });

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

Įsitikinkite, kad jūsų HTML faile yra paveikslėlis su ID „rotatableImage“:

Gestų Atpažinimo Bibliotekos

Sudėtingų gestų įgyvendinimas nuo nulio gali būti sudėtingas ir reikalaujantis daug laiko. Laimei, kelios JavaScript bibliotekos gali supaprastinti gestų atpažinimo procesą. Šios bibliotekos suteikia iš anksto sukurtus gestų atpažinimo įrankius ir priemones lietimo įvykiams tvarkyti.

Hammer.js

Hammer.js yra populiari JavaScript biblioteka gestams atpažinti. Ji palaiko platų gestų spektrą, įskaitant bakstelėjimą, dvigubą bakstelėjimą, perbraukimą, suėmimą, sukimą ir vilkimą. Ji yra lengva, paprasta naudoti ir labai pritaikoma. Hammer.js veikia klausydamasi lietimo įvykių ir tada nustatydama, kokį veiksmą vartotojas atlieka, remdamasi lietimo taškų vieta ir trukme.


 // Įtraukite Hammer.js į savo HTML
 // <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

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

 hammer.on('tap', function(event) {
  console.log('Aptiktas bakstelėjimo įvykis');
 });

 hammer.on('swipe', function(event) {
  console.log('Aptiktas perbraukimo įvykis');
  console.log('Perbraukimo kryptis: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Aptiktas suėmimo įvykis');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Aptiktas sukimo įvykis');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger yra dar viena populiari JavaScript biblioteka, specializuota gestų atpažinimui, ypač mobiliuosiuose įrenginiuose. Ji žinoma dėl savo mažo dydžio ir gero našumo. Ji sutelkia dėmesį į įprastus lietimo gestus, tokius kaip bakstelėjimas, perbraukimas, suėmimas, sukimas ir paspaudimas. Ji suteikia lengvai naudojamą API, skirtą gestams priskirti elementams.


 // Įtraukite AlloyFinger į savo HTML
 // <script src="alloy_finger.js"></script> // Pakeiskite savo AlloyFinger keliu

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Aptiktas bakstelėjimo įvykis');
  },
  swipe: function(evt) {
   console.log('Aptiktas perbraukimo įvykis');
   console.log('Perbraukimo kryptis: ' + evt.direction); // aukštyn, žemyn, kairėn, dešinėn
  },
  pinch: function(evt) {
   console.log('Aptiktas suėmimo įvykis');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Aptiktas sukimo įvykis');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Prieinamumo Aspektai

Įgyvendinant lietimo gestus, būtina atsižvelgti į prieinamumą vartotojams su negalia. Kai kurie vartotojai gali negalėti naudoti lietimo gestų dėl motorikos sutrikimų. Alternatyvių įvesties metodų, tokių kaip klaviatūros valdymas ar balso komandos, suteikimas užtikrina, kad jūsų programa bus prieinama platesnei auditorijai.

Našumo Optimizavimas

Lietimo įvykiai gali būti skaičiavimo požiūriu brangūs, ypač tvarkant sudėtingus gestus. Kodo optimizavimas našumui yra labai svarbus, siekiant užtikrinti sklandžią ir jautrią vartotojo patirtį.

Suderinamumas su Skirtingomis Naršyklėmis

Lietimo įvykių palaikymas skiriasi įvairiose naršyklėse ir įrenginiuose. Labai svarbu išbandyti savo kodą įvairiose naršyklėse ir įrenginiuose, siekiant užtikrinti suderinamumą. Apsvarstykite galimybę naudoti polifilus (polyfills) ar bibliotekas, kurios abstrahuoja naršyklių skirtumus.

Internacionalizacijos (i18n) Aspektai

Įgyvendindami lietimo gestus, nepamirškite atsižvelgti į internacionalizaciją (i18n). Nors pačios lietimo sąveikos paprastai yra nepriklausomos nuo kalbos, aplinkiniai vartotojo sąsajos elementai ir grįžtamojo ryšio mechanizmai turėtų būti lokalizuoti skirtingoms kalboms ir regionams.

Pasauliniai Pavyzdžiai ir Aspektai

Apsvarstykime, kaip lietimo gestai gali būti skirtingai taikomi įvairiuose pasauliniuose kontekstuose:

Išvada

Lietimo gestai yra galingas įrankis kuriant patrauklias ir intuityvias vartotojo patirtis. Suprasdami pagrindinius lietimo įvykius ir naudodami tinkamas gestų atpažinimo technikas, galite įgyvendinti platų gestų spektrą savo JavaScript projektuose. Nepamirškite atsižvelgti į prieinamumą, našumą ir suderinamumą su skirtingomis naršyklėmis, kad užtikrintumėte, jog jūsų programa gerai veiks visiems vartotojams. Technologijoms tobulėjant, tikėkitės pamatyti naujų gestų ir sąveikų tipų, todėl toliau mokykitės, kad išliktumėte skaitmeninių patirčių priešakyje.

Lietimo Gestai: Išsamus JavaScript Įgyvendinimo Vadovas | MLOG