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()` اغلب برای جلوگیری از انجام رفتار پیش‌فرض لمسی مرورگر، مانند اسکرول یا زوم، استفاده می‌شود.

پیاده‌سازی اشاره‌های پایه

با درک کامل رویدادهای لمسی، اکنون می‌توانیم اشاره‌های پایه را پیاده‌سازی کنیم. بیایید به مثال‌هایی مانند ضربه (tap)، کشیدن سریع (swipe) و کشیدن (drag) نگاهی بیندازیم. این موارد ابتدا با تعریف چیستی آن‌ها و سپس با ارائه مثال‌های جاوا اسکریپت توضیح داده می‌شوند.

اشاره ضربه (Tap)

اشاره ضربه یک لمس و رها کردن سریع روی صفحه است. برای پیاده‌سازی اشاره ضربه، می‌توانیم رویدادهای `touchstart` و `touchend` را ردیابی کرده و اختلاف زمانی بین آن‌ها را اندازه‌گیری کنیم. اگر اختلاف زمانی کمتر از یک آستانه مشخص (مثلاً ۲۰۰ میلی‌ثانیه) باشد، آن را یک ضربه در نظر می‌گیریم.


 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('ضربه تشخیص داده شد!');
  }
 });

اشاره کشیدن سریع (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) { // آستانه را در صورت نیاز تنظیم کنید
   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('کشیدن به بالا!');
   }
  }
 });

اشاره کشیدن (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;
 });

اطمینان حاصل کنید که یک عنصر با شناسه "draggableElement" در HTML خود دارید:


 
مرا بکشید!

اشاره‌های چند لمسی

اشاره‌های چند لمسی شامل استفاده از چندین انگشت برای تعامل با صفحه است. این امکان تعاملات پیچیده‌تر و گویاتری مانند زوم با دو انگشت (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; // انباشت مقیاس‌بندی
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // بازنشانی برای حرکت بعدی
  }
 });

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

اطمینان حاصل کنید که یک تصویر با شناسه "zoomableImage" در HTML خود دارید:

چرخش

چرخش شامل چرخاندن یک عنصر با استفاده از دو انگشت است. برای پیاده‌سازی چرخش، باید زاویه بین دو نقطه لمس را ردیابی کرده و عنصر را بر اساس آن بچرخانیم.


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

اطمینان حاصل کنید که یک تصویر با شناسه "rotatableImage" در HTML خود دارید:

کتابخانه‌های تشخیص اشاره

پیاده‌سازی اشاره‌های پیچیده از ابتدا می‌تواند چالش‌برانگیز و زمان‌بر باشد. خوشبختانه، چندین کتابخانه جاوا اسکریپت وجود دارند که می‌توانند فرآیند تشخیص اشاره را ساده کنند. این کتابخانه‌ها تشخیص‌دهنده‌های اشاره از پیش ساخته شده و ابزارهایی برای مدیریت رویدادهای لمسی ارائه می‌دهند.

Hammer.js

Hammer.js یک کتابخانه محبوب جاوا اسکریپت برای تشخیص اشاره‌ها است. این کتابخانه از طیف گسترده‌ای از اشاره‌ها، از جمله ضربه، ضربه دوگانه، کشیدن سریع، نیشگون، چرخش و حرکت (pan) پشتیبانی می‌کند. این کتابخانه سبک، آسان برای استفاده و بسیار قابل تنظیم است. Hammer.js با گوش دادن به رویدادهای لمسی کار می‌کند و سپس بر اساس مکان و مدت زمان نقاط لمس، تعیین می‌کند که کاربر چه عملی را انجام می‌دهد.


 // Hammer.js را در HTML خود اضافه کنید
 // 

 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 آسان برای اتصال اشاره‌ها به عناصر فراهم می‌کند.


 // AlloyFinger را در HTML خود اضافه کنید
 //  // با مسیر 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)';
  }
 });

ملاحظات دسترسی‌پذیری

هنگام پیاده‌سازی اشاره‌های لمسی، در نظر گرفتن دسترسی‌پذیری برای کاربران دارای معلولیت ضروری است. برخی از کاربران ممکن است به دلیل اختلالات حرکتی نتوانند از اشاره‌های لمسی استفاده کنند. فراهم کردن روش‌های ورودی جایگزین، مانند کنترل‌های صفحه کلید یا دستورات صوتی، تضمین می‌کند که برنامه شما برای مخاطبان گسترده‌تری قابل دسترسی باشد.

بهینه‌سازی عملکرد

رویدادهای لمسی می‌توانند از نظر محاسباتی سنگین باشند، به‌ویژه هنگام مدیریت اشاره‌های پیچیده. بهینه‌سازی کد برای عملکرد، برای تضمین یک تجربه کاربری روان و پاسخگو بسیار مهم است.

سازگاری بین مرورگرها

پشتیبانی از رویداد لمسی در مرورگرها و دستگاه‌های مختلف متفاوت است. آزمایش کد خود بر روی انواع مرورگرها و دستگاه‌ها برای اطمینان از سازگاری بین مرورگرها بسیار مهم است. استفاده از polyfillها یا کتابخانه‌هایی را که تفاوت‌های مرورگر را انتزاعی می‌کنند، در نظر بگیرید.

ملاحظات بین‌المللی‌سازی (i18n)

هنگام پیاده‌سازی اشاره‌های لمسی، به یاد داشته باشید که بین‌المللی‌سازی (i18n) را در نظر بگیرید. در حالی که خود تعاملات لمسی عموماً مستقل از زبان هستند، عناصر رابط کاربری و مکانیسم‌های بازخورد اطراف باید برای زبان‌ها و مناطق مختلف بومی‌سازی شوند.

مثال‌ها و ملاحظات جهانی

بیایید بررسی کنیم که چگونه اشاره‌های لمسی ممکن است در زمینه‌های مختلف جهانی به طور متفاوتی به کار گرفته شوند:

نتیجه‌گیری

اشاره‌های لمسی ابزاری قدرتمند برای ایجاد تجربیات کاربری جذاب و شهودی هستند. با درک رویدادهای لمسی زیربنایی و استفاده از تکنیک‌های مناسب تشخیص اشاره، می‌توانید طیف گسترده‌ای از اشاره‌ها را در پروژه‌های جاوا اسکریپت خود پیاده‌سازی کنید. به یاد داشته باشید که دسترسی‌پذیری، عملکرد و سازگاری بین مرورگرها را در نظر بگیرید تا اطمینان حاصل کنید که برنامه شما برای همه کاربران به خوبی کار می‌کند. با پیشرفت فناوری، انتظار داشته باشید که انواع جدیدی از اشاره‌ها و تعاملات را ببینید، به یادگیری ادامه دهید تا در خط مقدم تجربیات دیجیتال باقی بمانید.