عکس ها در بخش فرانت اند به طور پیشفرض غیرقابل زوم هستن و اگر برنامه نویس فرانت اند هستید حتما گاهی وقت ها نیاز پیدا میکنید که عکس های صفحه رو قابل زوم کنید و کاری کنید که با حالت های دست , زوم و آنزوم بشه . قطعا شما باید از ابزار های مناسب این کار استفاده کنید که من توی این مطلب به طور ویژه روی ابزار های مربوط به فریمورک انگولار تمرکز میکنم .

داستان چیه ؟

داستان از جایی شروع شد که من توی یکی از تسک های مربوط به شرکتی که باهاش کار میکنم , باید عکس ها رو قابل زوم میکردم و کاری میکردم که اون عکس حتما قابلیت این رو داشته باشه که با حالت های دست زوم و آنزوم بشه . نکته اینه که من باید کد های مناسب انگولار رو استفاده میکردم و بعد از کلی تست کردن به یک کتابخانه رسیدم که بهتر از همه بود و به خوبی به من کمک کرد .

و حالا میخوام توی این مطلب این کتابخانه رو معرفی کنم و یک تکه کد ساده رو هم بهتون بگم .

کتابخانه ngx-pinch-zoom

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

نحوه نصب و راه اندازی خوب حالا که با این کتابخانه آشنا شدیم وقتشه که کار باهاشم یاد بگیریم . اول از همه باید اون رو در فولدر پروژه نصب کنیم . از دستور زیر استفاده کنید :

1npm i ngx-pinch-zoom

و در مرحله بعدی باید اون رو توی بخش انگولار ماژول ایمپورت کنیم . کد زیر رو دنبال کنید :

1import { PinchZoomModule } from 'ngx-pinch-zoom';
2
3@NgModule({
4    imports: [ PinchZoomModule ]
5})

نکته مهم : حتما قبل از ایمپورت کردن کتابخانه , برنامه رو از حالت اجرا خارج کنید .

استفاده کردن

و بعد از اینکار های حالا شما میتونید از امکانات این کتابخانه استفاده کنید . برای استفاده کردن از این کتابخانه , باید عکس خودتون رو بین تگ <pinch-zoom> قرار بدید . کد زیر رو دنبال کنید :

1<pinch-zoom>
2    <img src=" path_to_image " />
3</pinch-zoom>

نکته مهم اینه که حتما این متا تگ رو در بخش html اصلی قرار بدید :

1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

کلی خاصیت و ماژول توی این کتابخانه وجود داره که میتونید اون ها رو نگاه کنید و اگر دوست داشتید استفاده کنید ( لینک کتابخانه رو آخر مطلب میزارم ). ولی به طور کلی , کدی رو که نیاز دارید رو من قرار میدم و اون کد رو توضیح میدم :

1<pinch-zoom [limit-zoom]="3" [ double-tab ]="true">
2    <img src=" path_to_image " />
3</pinch-zoom>

شما توی بخش llimit مشخص میکنید که عکس شما در چه حدی زوم بشه که من توی این کد زدم ۳ برابر . و توی بخش double-tab ما میگیم که با دوبار کلیک کردن دست این عکس زوم بشه یا نه ؟ که من توی این کد زدم که بشه .

کلی امکانات دیگه رو دارید مثل انیمشن زوم و تاخیر زوم و خیلی چیز های دیگه که میتونید نحوه استفادشو یاد بگیرید .

نتیجه گیری

من خوشحالم که به عنوان اولین نفر و احتمالا آخرین نفر درباره این مساله مطلب نوشتم . در کل این مطلب رو نوشتم تا برنامه نویس های انگولار مطلب فارسی در این باره داشته باشن و اگر انگلیسی خوبی ندارن بتونن فارسی مطلب یاد بگیرن . این خیلی مهمه که به هم کمک کنیم . امیدوارم این مطلب برای شما مناسب بوده باشه و تونسته باشه به شما کمک کنه .

برای دیدن این کتابخانه رو این لینک کلیک کنید .

سالم و سلامت باشید . . .