M

MLOG

मराठी

टच जेश्चर्सच्या जगाचे अन्वेषण करा आणि ते आपल्या जावास्क्रिप्ट प्रकल्पांमध्ये कसे लागू करायचे ते शिका. हे मार्गदर्शक मूलभूत टच इव्हेंट्सपासून प्रगत जेश्चर ओळख तंत्रांपर्यंत सर्व काही समाविष्ट करते.

टच जेश्चर्स: जावास्क्रिप्ट अंमलबजावणीसाठी एक सर्वसमावेशक मार्गदर्शक

आजच्या मोबाईल-फर्स्ट जगात, टच जेश्चर्स वापरकर्त्याच्या अनुभवाचा अविभाज्य भाग बनले आहेत. साध्या टॅपपासून ते जटिल मल्टी-फिंगर इंटरॅक्शनपर्यंत, टच जेश्चर्स वापरकर्त्यांना वेब ऍप्लिकेशन्ससोबत संवाद साधण्याचा एक नैसर्गिक आणि अंतर्ज्ञानी मार्ग प्रदान करतात. हे सर्वसमावेशक मार्गदर्शक टच जेश्चर्सच्या जगाचे अन्वेषण करते आणि आपल्या जावास्क्रिप्ट प्रकल्पांमध्ये त्यांची अंमलबजावणी करण्यासाठी एक चरण-दर-चरण दृष्टिकोन प्रदान करते.

टच इव्हेंट्स समजून घेणे

जेश्चर रेकग्निशनमध्ये जाण्यापूर्वी, या परस्परसंवादांना शक्ती देणारे मूलभूत टच इव्हेंट्स समजून घेणे महत्त्वाचे आहे. जावास्क्रिप्ट इव्हेंट्सचा एक संच प्रदान करते जे वापरकर्ता स्क्रीनला स्पर्श करतो तेव्हा फायर होतात. हे इव्हेंट्स टचबद्दल माहिती देतात, जसे की त्याचे स्थान आणि स्थिती.

मूलभूत टच इव्हेंट्स:

या प्रत्येक इव्हेंटमध्ये `touches` नावाची प्रॉपर्टी असते, जी `Touch` ऑब्जेक्ट्सची सूची आहे. प्रत्येक `Touch` ऑब्जेक्ट स्क्रीनवरील संपर्काच्या एका बिंदूचे प्रतिनिधित्व करतो आणि त्यात खालीलप्रमाणे माहिती असते:

उदाहरण: टच कोऑर्डिनेट्स लॉग करणे

हे सोपे उदाहरण दाखवते की जेव्हा वापरकर्ता स्क्रीनला स्पर्श करतो तेव्हा टच पॉईंटचे कोऑर्डिनेट्स कसे लॉग करायचे:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // ब्राउझरचे डीफॉल्ट वर्तन प्रतिबंधित करते (उदा., स्क्रोलिंग)
  let touch = event.touches[0];
  console.log('टच X: ' + touch.clientX + ', Y: ' + touch.clientY + ' वर सुरू झाला');
 });

टीप: `preventDefault()` पद्धत अनेकदा ब्राउझरला त्याचे डीफॉल्ट टच वर्तन, जसे की स्क्रोलिंग किंवा झूमिंग करण्यापासून प्रतिबंधित करण्यासाठी वापरली जाते.

मूलभूत जेश्चर्सची अंमलबजावणी करणे

टच इव्हेंट्सची ठोस समज असल्यामुळे, आता आपण मूलभूत जेश्चर्स लागू करू शकतो. चला टॅप, स्वाइप आणि ड्रॅग सारख्या उदाहरणांवर नजर टाकूया. ते काय आहेत हे प्रथम परिभाषित करून आणि नंतर जावास्क्रिप्ट उदाहरणे देऊन हे स्पष्ट केले जाईल.

टॅप जेश्चर

टॅप जेश्चर म्हणजे स्क्रीनवर पटकन स्पर्श करणे आणि सोडणे. टॅप जेश्चर लागू करण्यासाठी, आपण `touchstart` आणि `touchend` इव्हेंट्सचा मागोवा घेऊ शकतो आणि त्यांच्यातील वेळेतील फरक मोजू शकतो. जर वेळेतील फरक एका विशिष्ट थ्रेशोल्डपेक्षा (उदा. 200 मिलीसेकंद) कमी असेल, तर आपण त्याला टॅप मानतो.


 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('टॅप ओळखला गेला!');
  }
 });

स्वाइप जेश्चर

स्वाइप जेश्चर म्हणजे स्क्रीनवर एक जलद, दिशात्मक हालचाल. स्वाइप ओळखण्यासाठी, आपल्याला स्पर्शाची सुरुवातीची आणि शेवटची स्थिती ट्रॅक करणे आणि हालचालीचे अंतर आणि दिशा मोजणे आवश्यक आहे. आपल्याला स्वाइपच्या कालावधीचा देखील विचार करणे आवश्यक आहे.


 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) { // आवश्यकतेनुसार थ्रेशोल्ड समायोजित करा
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('उजवीकडे स्वाइप करा!');
   } else if (angle > 45 && angle <= 135) {
    console.log('खाली स्वाइप करा!');
   } else if (angle > 135 || angle <= -135) {
    console.log('डावीकडे स्वाइप करा!');
   } else {
    console.log('वर स्वाइप करा!');
   }
  }
 });

ड्रॅग जेश्चर

ड्रॅग जेश्चरमध्ये एखाद्या एलिमेंटला स्पर्श करणे आणि त्याला स्क्रीनवर हलवणे समाविष्ट असते. ड्रॅग जेश्चर लागू करण्यासाठी, आपल्याला टचमूव्ह इव्हेंटचा मागोवा घेणे आणि त्यानुसार एलिमेंटची स्थिती अद्यतनित करणे आवश्यक आहे.


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

तुमच्या HTML मध्ये "draggableElement" आयडी असलेला एक एलिमेंट असल्याची खात्री करा:


 
मला ड्रॅग करा!

मल्टी-टच जेश्चर्स

मल्टी-टच जेश्चर्समध्ये स्क्रीनसोबत संवाद साधण्यासाठी अनेक बोटांचा वापर करणे समाविष्ट आहे. यामुळे पिंच-टू-झूम आणि रोटेट यांसारख्या अधिक जटिल आणि अर्थपूर्ण परस्परसंवादांना अनुमती मिळते.

पिंच-टू-झूम

पिंच-टू-झूम हा एक सामान्य जेश्चर आहे जो इमेज किंवा नकाशा झूम इन आणि आउट करण्यासाठी वापरला जातो. पिंच-टू-झूम लागू करण्यासाठी, आपल्याला दोन टच पॉईंटमधील अंतर ट्रॅक करणे आणि त्यानुसार एलिमेंटचे प्रमाण (scale) समायोजित करणे आवश्यक आहे.


 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; // स्केलिंग जमा करा
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // पुढील हालचालीसाठी रीसेट करा
  }
 });

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

तुमच्या HTML मध्ये "zoomableImage" आयडी असलेली एक इमेज असल्याची खात्री करा:

रोटेशन (फिरवणे)

रोटेशनमध्ये दोन बोटांनी एलिमेंट फिरवणे समाविष्ट आहे. रोटेशन लागू करण्यासाठी, आपल्याला दोन टच पॉईंटमधील कोन ट्रॅक करणे आणि त्यानुसार एलिमेंट फिरवणे आवश्यक आहे.


 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; // रोटेशन जमा करा
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // पुढील हालचालीसाठी रीसेट करा
  }
 });

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

तुमच्या HTML मध्ये "rotatableImage" आयडी असलेली एक इमेज असल्याची खात्री करा:

जेश्चर रेकग्निशन लायब्ररीज

सुरुवातीपासून जटिल जेश्चर्स लागू करणे आव्हानात्मक आणि वेळखाऊ असू शकते. सुदैवाने, अनेक जावास्क्रिप्ट लायब्ररीज जेश्चर रेकग्निशनची प्रक्रिया सोपी करू शकतात. या लायब्ररीज पूर्व-निर्मित जेश्चर रेकग्नायझर्स आणि टच इव्हेंट्स हाताळण्यासाठी युटिलिटीज प्रदान करतात.

Hammer.js

Hammer.js ही जेश्चर्स ओळखण्यासाठी एक लोकप्रिय जावास्क्रिप्ट लायब्ररी आहे. ती टॅप, डबल-टॅप, स्वाइप, पिंच, रोटेट आणि पॅन यासह विस्तृत जेश्चर्सना सपोर्ट करते. ती हलकी, वापरण्यास सोपी आणि अत्यंत सानुकूल करण्यायोग्य आहे. Hammer.js टच इव्हेंट्स ऐकून आणि नंतर टच पॉईंट्सचे स्थान आणि कालावधी यावर आधारित वापरकर्ता कोणती क्रिया करत आहे हे ठरवून कार्य करते.


 // तुमच्या HTML मध्ये Hammer.js समाविष्ट करा
 // 

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

 hammer.on('tap', function(event) {
  console.log('टॅप इव्हेंट आढळला');
 });

 hammer.on('swipe', function(event) {
  console.log('स्वाइप इव्हेंट आढळला');
  console.log('स्वाइप दिशा: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('पिंच इव्हेंट आढळला');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('रोटेट इव्हेंट आढळला');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger ही आणखी एक लोकप्रिय जावास्क्रिप्ट लायब्ररी आहे जी विशेषतः मोबाईल उपकरणांसाठी जेश्चर रेकग्निशनमध्ये माहिर आहे. ती तिच्या लहान आकारासाठी आणि चांगल्या कामगिरीसाठी ओळखली जाते. ती टॅप, स्वाइप, पिंच, रोटेट आणि प्रेस यांसारख्या सामान्य टच जेश्चर्सवर लक्ष केंद्रित करते. ती एलिमेंट्सना जेश्चर्स बांधण्यासाठी वापरण्यास-सोपा API प्रदान करते.


 // तुमच्या HTML मध्ये AlloyFinger समाविष्ट करा
 //  // तुमच्या AlloyFinger पाथने बदला

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('टॅप इव्हेंट आढळला');
  },
  swipe: function(evt) {
   console.log('स्वाइप इव्हेंट आढळला');
   console.log('स्वाइप दिशा: ' + evt.direction); // वर, खाली, डावीकडे, उजवीकडे
  },
  pinch: function(evt) {
   console.log('पिंच इव्हेंट आढळला');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('रोटेट इव्हेंट आढळला');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

ॲक्सेसिबिलिटी विचार

टच जेश्चर्स लागू करताना, दिव्यांग वापरकर्त्यांसाठी ॲक्सेसिबिलिटीचा विचार करणे आवश्यक आहे. काही वापरकर्ते मोटर विकृतीमुळे टच जेश्चर्स वापरू शकत नाहीत. कीबोर्ड नियंत्रणे किंवा व्हॉइस कमांड्स यासारख्या पर्यायी इनपुट पद्धती प्रदान केल्याने आपले ऍप्लिकेशन व्यापक प्रेक्षकांसाठी ॲक्सेसिबल असल्याची खात्री होते.

कार्यक्षमता ऑप्टिमायझेशन

टच इव्हेंट्स संगणकीय दृष्ट्या महाग असू शकतात, विशेषतः जटिल जेश्चर्स हाताळताना. एक सुरळीत आणि प्रतिसाद देणारा वापरकर्ता अनुभव सुनिश्चित करण्यासाठी आपला कोड कार्यक्षमतेसाठी ऑप्टिमाइझ करणे महत्त्वाचे आहे.

क्रॉस-ब्राउझर सुसंगतता

विविध ब्राउझर आणि उपकरणांमध्ये टच इव्हेंट सपोर्ट बदलतो. क्रॉस-ब्राउझर सुसंगतता सुनिश्चित करण्यासाठी आपला कोड विविध ब्राउझर आणि उपकरणांवर तपासणे महत्त्वाचे आहे. ब्राउझरमधील फरक दूर करणाऱ्या पॉलीफिल किंवा लायब्ररी वापरण्याचा विचार करा.

आंतरराष्ट्रीयीकरण (i18n) विचार

टच जेश्चर्स लागू करताना, आंतरराष्ट्रीयीकरण (i18n) विचारात घेणे लक्षात ठेवा. टच इंटरॅक्शन स्वतः सामान्यतः भाषा-अज्ञेयवादी असले तरी, आजूबाजूचे UI घटक आणि अभिप्राय यंत्रणा वेगवेगळ्या भाषा आणि प्रदेशांसाठी स्थानिक केल्या पाहिजेत.

जागतिक उदाहरणे आणि विचार

चला विचार करूया की विविध जागतिक संदर्भांमध्ये टच जेश्चर्स कसे वेगळ्या प्रकारे लागू केले जाऊ शकतात:

निष्कर्ष

टच जेश्चर्स आकर्षक आणि अंतर्ज्ञानी वापरकर्ता अनुभव तयार करण्यासाठी एक शक्तिशाली साधन आहेत. मूलभूत टच इव्हेंट्स समजून घेऊन आणि योग्य जेश्चर रेकग्निशन तंत्रांचा वापर करून, आपण आपल्या जावास्क्रिप्ट प्रकल्पांमध्ये विविध प्रकारचे जेश्चर्स लागू करू शकता. आपले ऍप्लिकेशन सर्व वापरकर्त्यांसाठी चांगले कार्य करते याची खात्री करण्यासाठी ॲक्सेसिबिलिटी, कार्यक्षमता आणि क्रॉस-ब्राउझर सुसंगततेचा विचार करणे लक्षात ठेवा. जसजसे तंत्रज्ञान प्रगती करेल, तसतसे नवीन प्रकारचे जेश्चर्स आणि इंटरॅक्शन्स दिसण्याची अपेक्षा आहे, डिजिटल अनुभवांमध्ये आघाडीवर राहण्यासाठी शिकत रहा.

टच जेश्चर्स: जावास्क्रिप्ट अंमलबजावणीसाठी एक सर्वसमावेशक मार्गदर्शक | MLOG