M

MLOG

ไทย

สำรวจโลกของการสั่งงานด้วยการสัมผัสและเรียนรู้วิธีนำไปใช้ในโปรเจกต์ JavaScript ของคุณ คู่มือนี้ครอบคลุมทุกอย่างตั้งแต่อีเวนต์การสัมผัสพื้นฐานไปจนถึงเทคนิคการจดจำท่าทางขั้นสูง

การสั่งงานด้วยการสัมผัส (Touch Gestures): คู่มือฉบับสมบูรณ์สำหรับการนำไปใช้ใน JavaScript

ในโลกยุค Mobile-First ปัจจุบัน การสั่งงานด้วยการสัมผัสได้กลายเป็นส่วนสำคัญของประสบการณ์ผู้ใช้ ตั้งแต่การแตะธรรมดาไปจนถึงการโต้ตอบด้วยหลายนิ้วที่ซับซ้อน ท่าทางการสัมผัสเป็นวิธีที่เป็นธรรมชาติและใช้งานง่ายสำหรับผู้ใช้ในการโต้ตอบกับเว็บแอปพลิเคชัน คู่มือฉบับสมบูรณ์นี้จะสำรวจโลกของการสั่งงานด้วยการสัมผัสและนำเสนอแนวทางทีละขั้นตอนในการนำไปใช้ในโปรเจกต์ JavaScript ของคุณ

การทำความเข้าใจ Touch Events

ก่อนที่จะลงลึกถึงการจดจำท่าทาง สิ่งสำคัญคือต้องเข้าใจอีเวนต์การสัมผัส (touch events) ที่เป็นพื้นฐานของการโต้ตอบเหล่านี้ JavaScript มีชุดของอีเวนต์ที่จะทำงานเมื่อผู้ใช้สัมผัสหน้าจอ อีเวนต์เหล่านี้ให้ข้อมูลเกี่ยวกับการสัมผัส เช่น ตำแหน่งและสถานะ

Touch Events พื้นฐาน:

แต่ละอีเวนต์เหล่านี้มี property `touches` ซึ่งเป็นรายการของอ็อบเจกต์ `Touch` แต่ละอ็อบเจกต์ `Touch` แทนจุดสัมผัสเดียวบนหน้าจอและมีข้อมูลเช่น:

ตัวอย่าง: การบันทึกพิกัดการสัมผัส

ตัวอย่างง่ายๆ นี้สาธิตวิธีการบันทึกพิกัดของจุดสัมผัสเมื่อผู้ใช้สัมผัสหน้าจอ:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Prevents default browser behavior (e.g., scrolling)
  let touch = event.touches[0];
  console.log('Touch started at X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

หมายเหตุ: เมธอด `preventDefault()` มักใช้เพื่อป้องกันไม่ให้เบราว์เซอร์ทำงานตามพฤติกรรมการสัมผัสเริ่มต้น เช่น การเลื่อนหรือการซูม

การนำท่าทางพื้นฐานไปใช้งาน

ด้วยความเข้าใจที่มั่นคงเกี่ยวกับอีเวนต์การสัมผัส ตอนนี้เราสามารถนำท่าทางพื้นฐานไปใช้งานได้แล้ว มาดูตัวอย่างเช่น การแตะ (tap), การปัด (swipe) และการลาก (drag) ซึ่งจะอธิบายโดยการนิยามว่าคืออะไรก่อน แล้วจึงตามด้วยตัวอย่าง JavaScript

ท่าทางการแตะ (Tap)

ท่าทางการแตะคือการสัมผัสและปล่อยอย่างรวดเร็วบนหน้าจอ ในการสร้างท่าทางการแตะ เราสามารถติดตามอีเวนต์ `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('Tap detected!');
  }
 });

ท่าทางการปัด (Swipe)

ท่าทางการปัดคือการเคลื่อนไหวอย่างรวดเร็วและมีทิศทางบนหน้าจอ ในการตรวจจับการปัด เราต้องติดตามตำแหน่งเริ่มต้นและสิ้นสุดของการสัมผัส และคำนวณระยะทางและทิศทางของการเคลื่อนไหว เรายังต้องพิจารณาระยะเวลาของการปัดด้วย


 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) { // Adjust the threshold as needed
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Swipe right!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Swipe down!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Swipe left!');
   } else {
    console.log('Swipe up!');
   }
  }
 });

ท่าทางการลาก (Drag)

ท่าทางการลากเกี่ยวข้องกับการสัมผัสองค์ประกอบและย้ายไปทั่วหน้าจอ ในการสร้างท่าทางการลาก เราต้องติดตามอีเวนต์ touchmove และอัปเดตตำแหน่งขององค์ประกอบตามนั้น


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

ตรวจสอบให้แน่ใจว่าคุณมีองค์ประกอบที่มี id "draggableElement" ใน HTML ของคุณ:


 
Drag Me!

ท่าทางแบบหลายจุดสัมผัส (Multi-Touch)

ท่าทางแบบหลายจุดสัมผัสเกี่ยวข้องกับการใช้หลายนิ้วเพื่อโต้ตอบกับหน้าจอ ซึ่งช่วยให้เกิดการโต้ตอบที่ซับซ้อนและแสดงออกได้มากขึ้น เช่น การบีบนิ้วเพื่อซูม (pinch-to-zoom) และการหมุน (rotate)

การบีบนิ้วเพื่อซูม (Pinch-to-Zoom)

การบีบนิ้วเพื่อซูมเป็นท่าทางทั่วไปที่ใช้ในการซูมเข้าและออกจากรูปภาพหรือแผนที่ ในการสร้าง pinch-to-zoom เราต้องติดตามระยะห่างระหว่างจุดสัมผัสสองจุดและปรับขนาดขององค์ประกอบตามนั้น


 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; // Accumulate scaling
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Reset for next movement
  }
 });

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

ตรวจสอบให้แน่ใจว่าคุณมีรูปภาพที่มี id "zoomableImage" ใน HTML ของคุณ:

การหมุน (Rotation)

การหมุนเกี่ยวข้องกับการหมุนองค์ประกอบโดยใช้สองนิ้ว ในการสร้างการหมุน เราต้องติดตามมุมระหว่างจุดสัมผัสสองจุดและหมุนองค์ประกอบตามนั้น


 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; // Accumulate rotation
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Reset for next movement
  }
 });

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

ตรวจสอบให้แน่ใจว่าคุณมีรูปภาพที่มี id "rotatableImage" ใน HTML ของคุณ:

ไลบรารีสำหรับจดจำท่าทาง (Gesture Recognition)

การสร้างท่าทางที่ซับซ้อนตั้งแต่ต้นอาจเป็นเรื่องที่ท้าทายและใช้เวลานาน โชคดีที่มีไลบรารี JavaScript หลายตัวที่สามารถทำให้กระบวนการจดจำท่าง่ายขึ้น ไลบรารีเหล่านี้มีตัวจดจำท่าทางที่สร้างไว้ล่วงหน้าและเครื่องมือสำหรับจัดการอีเวนต์การสัมผัส

Hammer.js

Hammer.js เป็นไลบรารี JavaScript ยอดนิยมสำหรับการจดจำท่าทาง รองรับท่าทางที่หลากหลาย รวมถึง tap, double-tap, swipe, pinch, rotate และ pan มีขนาดเล็ก ใช้งานง่าย และปรับแต่งได้สูง Hammer.js ทำงานโดยการฟังอีเวนต์การสัมผัสแล้วพิจารณาว่าผู้ใช้กำลังดำเนินการใดโดยพิจารณาจากตำแหน่งและระยะเวลาของจุดสัมผัส


 // Include Hammer.js in your HTML
 // 

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

 hammer.on('tap', function(event) {
  console.log('Tap event detected');
 });

 hammer.on('swipe', function(event) {
  console.log('Swipe event detected');
  console.log('Swipe direction: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Pinch event detected');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Rotate event detected');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger เป็นอีกหนึ่งไลบรารี JavaScript ยอดนิยมที่เชี่ยวชาญด้านการจดจำท่าทาง โดยเฉพาะสำหรับอุปกรณ์มือถือ เป็นที่รู้จักในด้านขนาดที่เล็กและประสิทธิภาพที่ดี มุ่งเน้นไปที่ท่าทางการสัมผัสทั่วไป เช่น tap, swipe, pinch, rotate และ press มี API ที่ใช้งานง่ายสำหรับผูกท่าทางเข้ากับองค์ประกอบต่างๆ


 // Include AlloyFinger in your HTML
 //  // Replace with your AlloyFinger path

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Tap event detected');
  },
  swipe: function(evt) {
   console.log('Swipe event detected');
   console.log('Swipe direction: ' + evt.direction); // up, down, left, right
  },
  pinch: function(evt) {
   console.log('Pinch event detected');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Rotate event detected');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

ข้อควรพิจารณาด้านการเข้าถึง (Accessibility)

เมื่อสร้างท่าทางการสัมผัส สิ่งสำคัญคือต้องพิจารณาถึงการเข้าถึงสำหรับผู้ใช้ที่มีความพิการ ผู้ใช้บางรายอาจไม่สามารถใช้ท่าทางการสัมผัสได้เนื่องจากความบกพร่องทางการเคลื่อนไหว การจัดเตรียมวิธีการป้อนข้อมูลทางเลือก เช่น การควบคุมด้วยคีย์บอร์ดหรือคำสั่งเสียง จะช่วยให้แน่ใจว่าแอปพลิเคชันของคุณสามารถเข้าถึงได้โดยผู้ชมในวงกว้างขึ้น

การเพิ่มประสิทธิภาพการทำงาน (Performance Optimization)

อีเวนต์การสัมผัสอาจใช้ทรัพยากรในการคำนวณสูง โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับท่าทางที่ซับซ้อน การเพิ่มประสิทธิภาพโค้ดของคุณเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่ราบรื่นและตอบสนองได้ดี

ความเข้ากันได้ข้ามเบราว์เซอร์ (Cross-Browser Compatibility)

การรองรับอีเวนต์การสัมผัสแตกต่างกันไปในแต่ละเบราว์เซอร์และอุปกรณ์ การทดสอบโค้ดของคุณบนเบราว์เซอร์และอุปกรณ์ที่หลากหลายจึงเป็นสิ่งสำคัญเพื่อให้แน่ใจว่ามีความเข้ากันได้ข้ามเบราว์เซอร์ พิจารณาใช้ polyfills หรือไลบรารีที่ช่วยจัดการความแตกต่างของเบราว์เซอร์

ข้อควรพิจารณาด้านการทำให้เป็นสากล (i18n)

เมื่อสร้างท่าทางการสัมผัส อย่าลืมพิจารณาเรื่องการทำให้เป็นสากล (i18n) แม้ว่าการโต้ตอบด้วยการสัมผัสโดยทั่วไปจะไม่ขึ้นอยู่กับภาษา แต่องค์ประกอบ UI โดยรอบและกลไกการตอบสนองควรได้รับการแปลให้เหมาะกับภาษาและภูมิภาคต่างๆ

ตัวอย่างและข้อควรพิจารณาในระดับโลก

ลองพิจารณาว่าท่าทางการสัมผัสอาจถูกนำไปใช้แตกต่างกันอย่างไรในบริบทต่างๆ ทั่วโลก:

สรุป

ท่าทางการสัมผัสเป็นเครื่องมืออันทรงพลังในการสร้างประสบการณ์ผู้ใช้ที่น่าดึงดูดและใช้งานง่าย ด้วยการทำความเข้าใจอีเวนต์การสัมผัสที่เป็นพื้นฐานและการใช้เทคนิคการจดจำท่าทางที่เหมาะสม คุณสามารถนำท่าทางที่หลากหลายไปใช้ในโปรเจกต์ JavaScript ของคุณได้ อย่าลืมพิจารณาถึงการเข้าถึง ประสิทธิภาพ และความเข้ากันได้ข้ามเบราว์เซอร์เพื่อให้แน่ใจว่าแอปพลิเคชันของคุณทำงานได้ดีสำหรับผู้ใช้ทุกคน ในขณะที่เทคโนโลยีก้าวหน้าไป คาดหวังได้ว่าจะได้เห็นท่าทางและการโต้ตอบรูปแบบใหม่ๆ หมั่นเรียนรู้ต่อไปเพื่อที่จะอยู่แถวหน้าของประสบการณ์ดิจิทัล