هر چند سالی که در یک حوزه کار کنی، باز هم ممکنه موردی پیش بیاد که تا حالا باهاش برخورد نداشتی. به نظرم هر چقدر هم که این چالش کوچک یا بزرگ باشه، در هر حرفه و تخصصی خیلی جذابه.
چند وقت پیش یک فیچری مطرح شد در اپ در حال توسعه مون. چی بود؟ قابلیت زوم دو انگشتی روی یک عکس که بشه روی عکس zoom in یا zoom out کرد.
من هم از بین همه کارها روی این موضوع زوم کردم و برش داشتم. چون تا قبلش صرفا با event های touch آشنا بودم و مدل های دیگه ای از این event رو پیاده سازی کردم بودم. ولی این فیچر رو پیاده نکرده بودم.
گفتم این فیچر رو با شما هم مطرح کنم، اگر برخورد نکردین حداقل چشم تون یه بار دیده باشه.
این فیچر رو با تغییر نحوه نگه داشتن متغیرها و فراخوان event ها، میتونید در جاوااسکریپت vanilla هم استفاده کنید یا حتی فریم ورک محبوب من انگولار.
لیست event هایی که لازم داریم:
وقتی که ما آبجکت مورد نظر در صفحه رو لمس میکنیم، ایونت touchStart فعال میشه. مادامی که دستمون رو روی صفحه حرکت میدیم، به صورت رگباری event های touchMove فعال میشن. در انتها که دستمون رو برمیداریم ایونت touchEnd فراخوانی میشه.
این ایونت ها به این صورت صدا زده میشن:
اگر به داخل آبجکت ایونت touchStart و touchMove نگاه کنیم، دو تا متغیر می بینیم که خیلی به کار ما میاد:
متغیر targetTouches یک لیسته که اندازه ش برابره با تعداد انگشت های کاربر که همزمان صفحه رو تاچ میکنند. یعنی برای اینکه ببینیم دو انگشتی تاچ صورت گرفته یا نه، از کد زیر استفاده میکنیم:
متغیر touches هم یک لیست از آبجکت هاییه که مختصات نقطه تاچ رو به ما میده
ما اگر بتونیم فاصله بین دو نقطه تاچ رو در touchStart رو اندازه گیری کنیم و در یک متغیر نگه داریم،
بعد فاصله بین دو نقطه تاچ در touchMove رو اندازه گیری کنیم و در یک متغیر دیگه دائم آپدیت کنیم،
بعد در touchEnd این دو فاصله رو مقایسه کنیم،
میتونیم بفهمیم که دو انگشت از هم دورتر شدند یا نزدیک‌تر. اگر دورتر شده بودند zoom out کنیم و اگر نزدیک تر شدند zoom in کنیم.
پس اول دو تا متغیر در کامپوننت nextjs تعریف میکنم. اولی برای نگه داشتن فاصله بین دو نقطه تاچ در touchStart و دومی برای نگه داشتن فاصله بین دو نقطه تاچ در touchMove:
اگر مثلثات یادتون مونده باشه، میدونید که در مثلث قائم الزاویه، اندازه ضلع بزرگتر رو چطور به دست میارن:
حالا فرض کنید دو طرف ضلع z در واقع دو نقطه تاچ ما هستند. مقدار x در واقع اختلاف pageY های دو نقطه تاچ و مقدار Y در واقع اختلاف pageX های دو نقطه تاچ ما هستند.
معادلش بر اساس مقادیری که از طریق event به ما منتقل میشه، کد پایینه:
یه نکته دیگه از ریاضیات هم هست. وقتی یک عدد رو به توان دو میرسونیم، چه منفی باشه چه مثبت جواب یکیه. یعنی مقدار x به توان ۲ با -x به توان ۲ فرقی نداره. در واقع نیازی نیست که حتما ورودی ما مقدار مثبت باشه. میتونه منفی همون عدد هم باشه.
من نمیدونستم ( یا خواندم ولی یادم رفته ) که جاوااسکریپت در کتابخانه Math ، همچین تابعی داره بنام hypot. مقدار Y و X رو ورودی می‌گیره و مقدار Z برمیگردونه.
پس فاصله بین دو نقطه تاچ رو در ایونت های touchStart و touchMove با کد زیر به دست میاریم:
این تابع از ۲۰۱۵ در مرورگرها پشتیبانی میشه. میتونیم مستقیما از Math.sqrt هم استفاده کنیم که قدیمی تره:
در انتها ( ایونت touchEnd ) هم این دو مقدار رو مقایسه میکنیم و متوجه میشیم zoom in کردیم یا zoom out
الگوریتم zoom in و zoom out رو جدا پیاده سازی کنید که از طرق دیگه هم بتونید پیاده سازیش کنین. مثلا با کلیک رو دکمه های zoom in , zoom out هم کاربر بتونه کار کنه.
امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.
اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)
موفق باشید
