≡×منو

• ویندوز 10
• اینترنت، وای فای
• مفید
• ویندوز 7
• اشتباهات

پیمایش صفحه با کشیدن انگشت روی صفحه. ژست، ضربه، لمس، تلنگر، تند کشیدن، اسلاید، نیشگون گرفتن، کشش، حرکت چیست: برای گوشی هوشمند و آیفون. حرکات با دو انگشت

دستگاه های اندرویدی از صفحه نمایش لمسی استفاده می کنند. برای کاربرانی که به کنترل های دکمه ای عادت دارند، تغییر به عملکرد صفحه نمایش لمسی می تواند دشوار باشد.

کنترل دکمه ها از صفحه کلید و ماوس استفاده می کند، در حالی که کنترل صفحه لمسی با استفاده از انگشتان یا قلم انجام می شود.

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

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

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

1. لمس کنید (فشار دهید)

ضربه زدن (یا ضربه زدن) اولین اقدامی است که بیشتر در صفحه لمسی استفاده می شود.

لمس در بسیاری از موارد ضروری است:

• برای فعال کردن ویژگی ها،
• برای راه اندازی هر برنامه،
• فعال سازی یک یا آن پارامتر، عنصر،
• برای انتخاب نماد مورد نظر یا گزینه مربوطه در لیست،
• برای وارد کردن متن
• و غیره.

لمس کردن ساده است. به اندازه کافی آسان است که با انگشت یا قلم خود در مکان مورد نیاز روی صفحه لمس کنید، به عنوان مثال، نماد برنامه مورد نظر را لمس کنید.

برای وارد کردن متن کافیست فیلد مورد نظر را لمس کنید، یک صفحه کلید مجازی به صورت خودکار ظاهر می شود، می توانید با لمس کلیدهای دارای کاراکترهای دلخواه متن را تایپ کنید.

بی اختیار به یاد می آورم که چند سال پیش به ترمینال رفتم، دکمه های ترمینال را فشار دادم تا پول بگذارم. تلفن همراه. به طور کلی، من همه چیز را طبق معمول انجام دادم، اما هیچ اتفاقی در ترمینال نیفتاد، ترمینال به دکمه ها پاسخ نمی داد. بنابراین من 3 یا 4 رویکرد به ترمینال در روزهای مختلف با نتیجه صفر انجام دادم. در یک روز خوب، مرد جوانی که پشت سر من در ترمینال ایستاده بود، گفت: "اگر انگشت خود را روی صفحه فشار دهید چه؟" و اینجاست، شادی: انگشتم را روی صفحه فشار دادم و ترمینال شروع به پاسخ دادن به فشار دادن کرد، همه چیز درست شد. بنابراین من برای اولین بار با یک صفحه نمایش لمسی ملاقات کردم.

2. دو ضربه سریع بزنید

دو ضربه سریع (یا دو ضربه) برای بزرگنمایی سریع، برای راه اندازی برخی از برنامه ها و سایر اقدامات استفاده می شود.

برای تغییر مقیاس، به عنوان مثال، هنگام مشاهده یک صفحه وب، باید به سرعت صفحه را 2 بار با حداقل فاصله لمس کنید. برای بازگشت به حالت قبلی، باید دوباره روی صفحه دوبار ضربه بزنید.

یک دوبار ضربه زدن گزینه مربوطه را روشن می کند، دو بار ضربه دوم همان گزینه را لغو می کند.

اگر اندروید را با ویندوز مقایسه کنید، دوبار ضربه زدن در اندروید تا حدودی شبیه دوبار کلیک کردن روی دکمه سمت چپ در ویندوز است.

3. لمس کنید و نگه دارید

فشار دادن (لمس کردن) با نگه داشتن برای باز کردن گزینه های اضافی در صورت وجود استفاده می شود.

باید ناحیه مورد نظر را روی صفحه لمس کنید و انگشت خود را برای چند ثانیه نگه دارید. در لحظه لمس و نگه داشتن هیچ اتفاقی نمی افتد و این ممکن است در ابتدا تا حدودی تعجب آور باشد. اما به محض اینکه انگشت خود را رها کنید، بلافاصله یک منوی اضافی ظاهر می شود یا عمل دیگری در نتیجه لمس و نگه داشتن رخ می دهد.

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

4. سوایپ (تند کشیدن)

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

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

هنگامی که برای اولین بار نیاز به ارسال پیام به زبان روسی روی تلفن هوشمندم داشتم، برای این کار مجبور شدم صفحه کلید مجازی را از انگلیسی به روسی تغییر دهم. من تمام گزینه ها را امتحان کردم، حتی به تنظیمات زبان رفتم - به هیچ وجه درست نشد: طرح انگلیسی "در مسیر خود ایستاده بود". به من گفته شد که فقط باید انگشتم را از چپ به راست به آرامی روی فضا تکان دهم. ضمناً روی کلید Space روی صفحه کلید مجازی نوشته «انگلیسی» را دیدم، آن را فشار دادم، اما فایده ای نداشت. و به محض اینکه انگشتش را روی فضا تکان داد، طرح بلافاصله به روسی تغییر کرد. اینجا داره سوایپ میکنه، کار میکنه!

5. کشیدن و رها کردن (کشیدن و رها کردن)

کشیدن (یا کشیدن) برای جابجایی برنامه ها روی صفحه و همچنین برای جابجایی پوشه ها، نمادها و موارد مشابه مورد نیاز است.

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

6. آوردن و باز کردن انگشتان

یک عملکرد ساده و مفید برای تغییر مقیاس آنچه روی صفحه نمایش داده می شود: تصویر، متن، نقشه، نمودار و غیره. در صورت نیاز می توانید دوباره بزرگنمایی و کوچکنمایی کنید.

برای انجام این کار، باید همزمان با دو انگشت (یا چند انگشت) صفحه را لمس کنید و بدون برداشتن انگشتان از روی صفحه، آنها را از هم جدا کنید. مقیاس به نسبت افزایش خواهد یافت.

اگر با دو انگشت (یا چند انگشت) صفحه را لمس کنید و بدون برداشتن آنها از روی صفحه، آنها را به هم نزدیک کنید، مقیاس کاهش می یابد.

7. جهت صفحه نمایش را تغییر دهید

جهت گیری پرتره (عمودی) برای خواندن کتاب مناسب است. جهت گیری افقی (افقی) برای تماشای فیلم ها و نقشه های مختلف خوب است. همه اینها، البته، برای همه نیست، هر کس برای خودش انتخاب می کند که کدام جهت گیری در این یا آن مورد بهتر است.

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

اینها همه گزینه‌های ژست‌های ممکن نیستند، اما شاید ابتدایی‌ترین و پرکاربردترین گزینه‌ها باشند. سایر حرکات، مانند چرخش در یک دایره و غیره. کمتر مورد استفاده قرار می گیرند و این حرکات ممکن است در هر برنامه ای کار نکنند. به عنوان یک قاعده، حرکات ذکر شده برای همه موارد یا تقریباً همه چیز کافی است.

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

P.S. مطالب دیگر را بررسی کنید:

مقالات به روز سواد رایانه را مستقیماً در صندوق ورودی خود دریافت کنید.
در حال حاضر بیش از 3000 مشترک

.

دوستان عزیزی که شروع به تسلط بر گوشی های هوشمند کرده اند!

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

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

بنابراین، در اینجا کنترل های اصلی صفحه لمسی وجود دارد:

تک لمسی (ضربه زدن)

این یک لمس سریع (تقریباً بدون تاخیر) روی صفحه با یک انگشت است. تاخیر نباید بیش از 0.5 ثانیه باشد. انجام هر گونه لمسی به اندازه کافی آسان است، زیرا صفحه نمایش های لمسی خازنی امروزی بسیار حساس هستند (برخلاف نمونه های مقاومتی که در کنار هم قرار گرفته اند).

در صفحه اصلی (و هر صفحه دسکتاپ)، تنها یک ضربه بر روی نماد برنامه، برنامه را راه اندازی می کند. این مشابه فشار دادن دکمه سمت چپ ماوس در یک کامپیوتر معمولی است. در موارد دیگر، در داخل برنامه، این می تواند انتخاب از بین چندین گزینه، انتخاب یک مخاطب در لیست مخاطبین، تایید یک عمل و غیره باشد.

یک لمس در فیلدهای متنی، مکان نما را در محل لمس شده قرار می دهد.

ضربه طولانی

این یک لمس با یک انگشت با تاخیر بیش از 1 ثانیه است (تا زمانی که نتیجه ظاهر شود). نتیجه ممکن است بسته به شرایط متفاوت باشد. در بیشتر موارد، این عمل منجر به ظاهر شدن یک منوی زمینه (شبیه به دکمه سمت راستموش).

ضربه زدن با تأخیر بر روی یک نماد در صفحه اصلی منجر به "چسبیدن" به انگشت این نماد می شود که امکان جابجایی آن را در اطراف صفحه نمایش از جمله به صفحه اصلی مجاور و همچنین حذف نماد (نه خود برنامه) ممکن می کند. ) به سبدی که روی صفحه ظاهر می شود.

در فیلدهای نوشتاری، تأخیر منجر به انتخاب متن زیر انگشت می‌شود، با امکان گسترش بیشتر انتخاب با علامت‌های پایان حاصل، همزمان منو ظاهر می‌شود. کپی، انتخاب همه، برش، چسباندن. مکث روی برچسب مکان نما باعث ظاهر شدن منو می شود درج کنید(آخرین محتوای کلیپ بورد)، چسباندن از کلیپ بورد(هر یک از 20 محتوای کلیپ بورد آخر).

دو ضربه سریع (دو ضربه سریع)

با یک انگشت با فاصله کوتاهی بین ضربه ها (بیشتر از 0.2 ثانیه) دو ضربه بزنید. برای بزرگنمایی متناوب و کوچک کردن یک صفحه وب در مرورگر، یک تصویر در گالری و غیره استفاده می شود. باید دقیقاً روی ناحیه ای از صفحه که می خواهید بزرگتر و با جزئیات بیشتر مشاهده کنید کلیک کنید.

لمس با حرکت (ضربه زدن و کشیدن)

این یک لمس با یک انگشت با شروع فوری (تاخیر بیش از 0.2 ثانیه) شروع حرکت انگشت روی صفحه بدون رها کردن انگشت است. تأخیر بیشتر در یک مکان پس از شروع حرکت نقشی ندارد: به نظر می رسد محتویات صفحه تا زمانی که رها شود به انگشت می چسبد. به این ترتیب می توانید در دسکتاپ (صفحه نمایش)، صفحات موجود در مرورگر در هر جهتی، در لیست ها (به عنوان مثال، مخاطبین) و غیره پیمایش کنید. این حرکت همچنین برای جابجایی لغزنده‌های کنترل‌های مجازی مختلف (مانند حجم، روشنایی و غیره) کاربرد دارد.

انگشت خود را بکشید

این عمل با یک انگشت شبیه به مورد قبلی است، اما بدون حرکت طولانی در اطراف صفحه نمایش انجام می شود، که یادآور ضربه سریع قلم مو روی کاغذ است. در عین حال، محتویات صفحه حتی پس از برداشتن انگشت از روی صفحه نمایش در روند "سکته مغزی" با کاهش تدریجی به حرکت خود ادامه می دهند. به یاد می‌آورم که ویدیوی اولین نمایش استیو جابز از این اثر در رونمایی از آیفون 2G اپل در سال 2007 با تشویق‌های زیادی همراه شد.

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

همگرایی (نیشگون گرفتن) و پرورش دو انگشت (نفوذ، زوم)

این تکنیک برای کاهش هموار و بر این اساس، افزایش مقیاس تصویر روی صفحه (تصاویر، صفحات وب) استفاده می شود. هر دو انگشت خود را تقریباً همزمان روی صفحه قرار می دهید و سپس حرکتی را انجام می دهید تا انگشتان خود را به هم نزدیک کنید (نفوذ کنید) یا آنها را از هم جدا کنید. جهت حرکت انگشتان (حرکات راست چپ، بالا به پایین یا میانی) نقشی ندارد.

چرخش با دو انگشت (چرخش)

این تکنیک دیگری است که برای چرخاندن تصویر روی صفحه استفاده می شود. پس از لمس صفحه، دو انگشت هر کدام در امتداد یک قوس دایره ای در یک جهت (در جهت عقربه های ساعت یا خلاف جهت عقربه های ساعت) حرکت می کنند. یا یک انگشت بی حرکت در مرکز چرخش می ایستد، در حالی که انگشت دیگر به صورت کمانی در اطراف این مرکز حرکت می کند. این روش به ندرت مورد استفاده قرار می گیرد. به عنوان مثال، من از آن هنگام ویرایش یک تصویر در برنامه MDScan برای دریافت کپی های اسکن شده اسناد استفاده کردم.

معنی اصطلاحات جدید را یاد بگیرید! یک واژه نامه سریع برای دارندگان آیفون، تلفن های هوشمند و تبلت ها را بررسی کنید.

همه میدانند:

کلیک کنید (کلیک کنید) - روی دکمه ماوس کلیک کنید، کوتاه فشار دهید.

دوبار کلیک کنید، دوبار کلیک کنید (دوبار کلیک) - دو کلیک سریع روی دکمه ماوس.

یک رابط نحوه "ارتباط" یک دستگاه یا برنامه با شما است.

پیمایش - پیمایش صفحه.

اسکرین شات - یک عکس فوری ("عکس") از صفحه.

برای بسیاری شناخته شده است:

کشیدن و رها کردن، کشیدن و رها کردن (کشیدن و رها کردن) - "کشیدن و رها کردن" - در یک مکان فشار دهید، سپس حرکت کنید و در مکان دیگری رها کنید.

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

پد لمسی، پد لمسی (پد لمسی) - یک فیلد روی صفحه کلید لپ تاپ برای فشار دادن و حرکات با انگشتان.

صفحه لمسی (صفحه نمایش لمسی) - صفحه نمایش لمسی: فشار انگشت را درک می کند. به عنوان مثال، صفحه نمایش تبلت یا دستگاه خودپرداز.

حرکات ساده برای دستگاه های لمسی:

ضربه بزنید، ضربه بزنید (ضربه بزنید) - یک فشار کوتاه با انگشت، شبیه به یک کلیک.

دو بار ضربه بزنید، دو ضربه بزنید، دو ضربه بزنید (دو ضربه بزنید) - دو فشار کوتاه با انگشت خود، شبیه به یک دوبار کلیک.

ضربه طولانی، لمس (لمس) - فشار دادن طولانی تر از Tap.

لمس کنید و نگه دارید (لمس و نگه دارید) - فشار دهید و نگه دارید.

حرکات جدید برای دستگاه های لمسی:

تلنگر (تلنگر) - روی صفحه در جهت حرکت آینده تصویر صفحه به صورت مایل کلیک کنید، پس از تلنگر تصویر با اینرسی به حرکت خود ادامه می دهد.

سوایپ (کشیدن)، اسلاید (اسلاید) - لغزش طولانی مدت انگشت خود روی صفحه نمایش.

نیشگون گرفتن (خنثی کردن) - نیشگون گرفتن، فشار دادن حرکت دو انگشت به طور همزمان روی صفحه برای کاهش تصویر.

Spread / Spread (گسترش)، Stretch (کشش: برای مایکروسافت)، Pinch-it-open (آن را باز کنید: برای اپل) - حرکت کششی با دو انگشت به طور همزمان در سراسر صفحه برای بزرگ کردن تصویر.

Pan, Pan (pan) - حرکت آهسته انگشت در سراسر صفحه برای حرکت و نگاه کردن به یک تصویر بزرگ شده.

اگر نکته مهمی کم است یا با عبارت آن موافق نیستید، برای ما بنویسید: این آدرس پست الکترونیکمحافظت در برابر هرزنامه ها برای مشاهده باید جاوا اسکریپت را فعال کرده باشید.

هنگام توسعه برنامه‌های اندروید و آیفون با آی‌پد (IOS) تنها با استفاده از فناوری‌های وب، دیر یا زود هر توسعه‌دهنده‌ای با سؤال پیاده‌سازی و استفاده از اقدامات چندلمسی پیچیده در بازی یا برنامه خود، مانند کشیدن انگشت، پینچ کردن، و همچنین پردازش مواجه می‌شود. یک ضربه طولانی (لمس طولانی با یک انگشت بدون حرکت) و کشیدن "n" قطره.

در این مقاله، ما به روش‌هایی برای پردازش رویدادهای لمسی با پیچیدگی‌های متفاوت در رویدادهای جاوا اسکریپت، بدون کتابخانه‌های شخص ثالث نگاه می‌کنیم (فقط از jQuery دقیقه استفاده می‌کنیم).

من فوراً رزرو می کنم که فقط از jQuery استفاده می کنم تا رفتار پیش فرض مرورگر را در رویداد غیرفعال کنم. من این کتابخانه را دوست ندارم، بنابراین همه چیز در Vanilla JS نوشته خواهد شد.

بنابراین، اجازه دهید با تئوری شروع کنیم و در واقع به این موضوع بپردازیم که چه رویدادهایی باید هنگام ایجاد یک برنامه یا بازی استفاده شوند.

در مجموع، 3 رویداد کلیدی استفاده می شود:

touchstart - صفحه را لمس کرد

لمسی - انگشت برداشته شد

touchmove - انگشت خود را حرکت دهید

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

هر لمس باید مشخص شود. و برای این کار از لیست ها استفاده می شود:

لمس - تمام انگشتانی که در حال حاضر با صفحه در حال تعامل هستند («لمس شده» روی صفحه)

targetTouches - فهرست انگشتانی که با عنصر تعامل دارند

changeTouches - فهرست انگشتانی که در رویداد فعلی شرکت می کنند. اگر برای مثال یک رویداد لمسی باشد، لیست حاوی انگشتی است که حذف شده است (حتی اگر 4 انگشت دیگر هنوز روی صفحه باشند).

برای درک آسان تر، وضعیت به شرح زیر است:

من یک انگشت را روی صفحه گذاشتم و هر 3 لیست یک عنصر دارند.

من انگشت دوم را گذاشتم و اکنون touchs دارای 2 عنصر است، targetTouchs 2 عنصر خواهد داشت اگر انگشت دوم را روی همان عنصر HTML قرار دهم، و تغییرات Touches به نوبه خود فقط انگشت دوم را خواهد داشت، زیرا این او بود که باعث شد رویداد.

اگر 2 انگشت را همزمان روی صفحه بگذارم، تغییرات لمسی دارای 2 عنصر (هر کدام در هر انگشت) خواهد بود.

اگر شروع به حرکت دادن انگشتانم روی صفحه کنم، فقط لیست تغییرات لمسی تغییر می کند. تعداد عناصری که حاوی آن خواهد بود برابر با تعداد انگشتان درگیر در حرکت خواهد بود (حداقل 1).

اگر انگشتم را برداریم، لیست‌ها لمس می‌شوند، targetTouchs یک عنصر خالی خواهد بود، و changeTouches حاوی انگشت خواهد بود، زیرا رویداد را راه‌اندازی کرده است (لمس)

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

اکنون زمان آن است که دقیقاً چه اطلاعاتی در مورد انگشت به دست آوریم:

شناسه - شناسه منحصر به فرد لمس

هدف - خود شیئی که لمس کردیم

PageX,PageY - مختصات را در صفحه لمس کنید

با تماس می توانید شناسه منحصر به فرد یک لمس را مشاهده کنید رویداد.لمس.شناسهو در IOS، اگر اشتباه نکنم، باید این کار را انجام دهید event.originalEvent.touches.identifier.

خوب، آنچه قبلاً به شما یاد داده ام، و اکنون وقت آن است که به تمرین بروید.

قبل از شروع، چند نکته وجود دارد که باید بدانید. در هر بازی، برنامه‌ای که در اندروید و IOS می‌سازید، باید واکنش استاندارد کامپوننت WebView به رویدادها را غیرفعال کنید. برای انجام این کار، jQuery را وصل کردیم (من نتوانستم کاری که توابع انجام می دهند را در Pure JS انجام دهم event.preventDefault()و event.stopPropagation()).

بنابراین باید موارد زیر را در کد JS خود قرار دهید:

event.preventDefault();
event.stopPropagation();

) نادرست)

event.preventDefault();
event.stopPropagation();
/* این کد مدیریت رویداد شما است */
) نادرست)

event.preventDefault();
event.stopPropagation();
/* این کد مدیریت رویداد شما است */
) نادرست)

این کار باید انجام شود، زیرا بسیاری از دستگاه‌های بدون آن دارای ترمزهای قابل توجه، اشکالات و انیمیشن‌های ناگهانی هستند.

پریشان. ادامه می دهیم.

بیایید تمام تعاملات لمسی اولیه با صفحه نمایش و عناصر را با داشتن دانش به دست آمده شرح دهیم.

ضربه زدن

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

var myclick=event.targetTouches; /*کد شما*/
}
) نادرست)

به عنوان مثال در یک متغیر myclickشامل لمس شما خواهد شد.

ضربه طولانی

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

پیاده سازی 1:

var ldelay;
var betw=();
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
ldelay=تاریخ جدید();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
) نادرست)
/*باز کردن انگشت را بگیر*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)(
/*اینم کد شما*/
}
) نادرست)

این اولین اجرای جاوا اسکریپت Long Tap است. منطق این است: لمس را می گیریم، زمان این رویداد را اندازه می گیریم، رها شدن را می گیریم، زمان رهاسازی را اندازه می گیریم، بار اول را از دومی کم می کنیم و بررسی می کنیم که آیا موقعیت انگشت روی صفحه تغییر کرده است یا خیر. اگر بیش از 800 میلی ثانیه با انگشت در همان مکان و زمان گذشته باشد، اقدامات Long Tap را انجام می دهیم.

حالا بیایید پیاده سازی دوم را با منطق کمی متفاوت نگاه کنیم:

پیاده سازی 2:

varlttimer;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
) نادرست)
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
) نادرست)
document.addEventListener("touchend", function(event) (
clearTimeout(lttimer);
) نادرست)
تابع longTouch()(/*کد شما*/)

اجرای فوق از رویداد Long Tap در جاوا اسکریپت صحیح تر است و بیشتر در برنامه های تلفن همراه استفاده می شود. تفاوت اصلی آن با پیاده سازی قبلی این است که منتظر رها شدن انگشت نمی ماند و در صورت حرکت نکردن انگشت، رویداد Long Tap را اجرا می کند که باید آن را در تابع longTouch قرار دهید. لمس طولانی.

انگشت خود را بکشید

وقت آن است که در مورد صفحه بندی روی صفحه نمایش گوشی هوشمند یا تبلت صحبت کنیم. کشیدن انگشت - در وهله اول در ساخت و ساز بسیار رایج است برنامه های موبایل، بنابراین دیر یا زود هر برنامه ساز باید با آن مقابله کند.

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

اگر یک توسعه دهنده هاردکور هستید - بیایید برویم!

پیاده سازی 1:

var initialPoint;
var finalPoint;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
) نادرست)
document.addEventListener("touchend", function(event) (
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
اگر (xAbs > 20 || yAbs > 20) (
اگر (xAbs > yAbs) (
اگر (finalPoint.pageX< initialPoint.pageX){
/*به چپ بکشید*/)
دیگر(
/*Swipe Right*/)
}
دیگر(
اگر (finalPoint.pageY< initialPoint.pageY){
/*بالا کشیدن*/)
دیگر(
/*Swipe DOWN*/)
}
}
) نادرست)

این اولین پیاده سازی جاوا اسکریپت ما است. ویژگی این پیاده سازی این است که وقتی انگشت درگیر در رویداد را رها می کنید، رویداد به عنوان یک سوایپ حساب می شود. این سوایپ را می توان در برخی کارها استفاده کرد. در این و بسیاری از مثال های دیگر فراموش نکنید که رفتار استاندارد مرورگر را در رویدادهای لمسی خاموش کنید (در مورد این موضوع در بالا نوشتم)، معمولاً آنها را در مثال های داده شده نمی نویسم، اما فراموش نکنید.

و اکنون بیایید به یکی دیگر از اجرای کلاسیک نگاه کنیم، زمانی که کشیدن انگشت باید در زمان واقعی محاسبه شود، به عنوان مثال، هنگام ورق زدن صفحه:

var startPoint=();
var nowPoint;
var ldelay;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
startPoint.x=event.changedTouches.pageX;
startPoint.y=event.changedTouches.pageY;
ldelay=تاریخ جدید();
) نادرست)
/*حرکت را با انگشت خود بگیرید*/
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
var otk=();

otk.x=nowPoint.pageX-startPoint.x;
/*پردازش داده*/
/*مثلا*/
if(Math.abs(otk.x)>200)(
if(otk.x0)(/*تند کشیدن به راست (صفحه بعدی)*/)
startPoint=(x:nowPoint.pageX,y:nowPoint.pageY);
}
) نادرست)
/*باز کردن انگشت را بگیر*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
nowPoint=event.changedTouches;
var xAbs = Math.abs(startPoint.x - nowPoint.pageX);
var yAbs = Math.abs(startPoint.y - nowPoint.pageY);
if ((xAbs > 20 || yAbs > 20) && (pdelay.getTime()-ldelay.getTime()) yAbs) (
اگر (nowPoint.pageX< startPoint.x){/*СВАЙП ВЛЕВО*/}
other(/*Swipe Right*/)
}
دیگر(
اگر (nowPoint.pageY< startPoint.y){/*СВАЙП ВВЕРХ*/}
other(/*Swipe DOWN*/)
}
}
) نادرست)

در این روش کمی متفاوت رفتیم و تا حدی از اصل اجرای اول استفاده کردیم. به طور منطقی، این یک کشیدن انگشت کمی پیچیده تر است. در جایی که /*Process Data*/ نظر داده می شود، باید از مختصات انگشت کشیدن استفاده کنید. به عنوان مثال می تواند انیمیشن ورق زدن باشد و هر چه انگشت چپ تر باشد صفحه بیشتر ورق می شود. مثلاً ما در آن قسمت شنونده رویداد هستیم حرکت لمسیفقط مختصات x ردیابی می شود، y - به روشی مشابه پیچ می شود. در یک متغیر otk.xموقعیت فعلی انگشت را نسبت به نقطه ای که برای اولین بار با eran لمس کرده است ذخیره کنید. اگر انگشت در سمت چپ این نقطه باشد، متغیر دارای یک مقدار منفی است، اگر در سمت راست - یک مقدار مثبت است.

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

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

کشیدن "n" Drop (کشیدن عنصر)

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

var obj = document.getElementById("sat");
/*لمس کن*/
obj.addEventListener("touchstart", function(event) (
if (event.targetTouches.length == 1) (
var touch=event.targetTouches;
touchOffsetX = touch.pageX - touch.target.offsetLeft;
touchOffsetY = touch.pageY - touch.target.offsetTop;
}
) نادرست)
/*جابجایی شی*/
obj.addEventListener("touchmove", function(event) (
if (event.targetTouches.length == 1) (
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + "px";
obj.style.top = touch.pageY-touchOffsetY + "px";
}
) نادرست)

همانطور که می بینید، این تمام کد نیست، تا کنون ما کشیدن بدون دراپ را به دست آورده ایم، اما احتمالا قبلاً متوجه شده اید که حرکت عنصر در نهایت توسط پارامترهای css انجام می شود. ترک کردو بالا. به جای این دو خط که وظیفه جابجایی جسم در اطراف صفحه نمایش را بر عهده دارند، می توانید قرار دهید:

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

آن ها از CSS3 استفاده کنید، اما در مورد من متوجه افزایش عملکرد نشدم، بنابراین بهتر است بالاو ترک کرد. با این کد می توانید یک آیتم را در فیلد جابجا کنید، اما رها کردن آن در یک مکان خاص محاسبه نمی شود. برای پیاده سازی این، یک کنترل کننده لمسی به شی با کد مربوطه در داخل آن اضافه کنید:

var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", function(event) (
if (event.changedTouches.length == 1) (
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
اگر(
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/*ما بالای شیء تروبج هستیم*/
}
}
) نادرست)

برای اینکه همه چیز کار کند، شی خود را به یک متغیر نشان دهید طروبجو شما خوشحال خواهید شد.

زیر و بم (نرج کردن)

زمان آن فرا رسیده است که نیشگونگی معروف را به یاد بیاوریم که اولین بار توسط استیو جابز در هنگام ارائه اولین آیفون نشان داده شد. این حرکت دو انگشت به سمت یکدیگر یا دور شدن از یکدیگر است که به آن پینچ می گویند. معمولاً از این ژست برای کم یا زیاد کردن چیزی استفاده می شود.

در مثال زیر، نکات کلیدی با نظرات مشخص شده اند (به طوری که کد در یک فرنی کامل گندم ادغام نمی شود):

/*تعریف چند متغیر*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
varscale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*یک تابع بنویسید که فاصله بین انگشتان را تعیین کند*/
فاصله تابع (p1, p2) (
بازگشت (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*ابتدای اسلش را بگیر*/
objzoom.addEventListener("touchstart", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
اگر (tt.length >= 2) (
dist = فاصله (tt، tt)؛
مقیاس بندی = درست;
) دیگر (
مقیاس بندی = نادرست;
}
) نادرست)
/*بزرگنمایی را بگیرید*/
objzoom.addEventListener("touchmove", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
اگر (مقیاس بندی) (
curr_scale = فاصله (tt، tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
) نادرست)
/*آخر اسلش را بگیر*/
objzoom.addEventListener("touchend", function(evt) (
vartt = evt.targetTouches;
اگر (tt. طول< 2) {
مقیاس بندی = نادرست;
اگر (curr_scale< min_zoom) {
scale_factor = min_zoom;
) دیگر (
if (curr_scale > max_zoom) (
scale_factor = max_zoom;
) دیگر (
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
) دیگر (
مقیاس بندی = درست;
}
) نادرست)

در مثال از یک شی با id برای تست استفاده می کنیم dro، می توانید با تخصیص شیء خود به یک متغیر از آن استفاده کنید objzoom. در متغیرها، می توانید داده ها را تغییر دهید، به عنوان مثال، حداکثر زوم یا حداقل.

تصاویر کشویی و HTML

قبلاً در بالا توضیح داده‌ایم که چگونه یک سوایپ ایجاد کنید که بر اساس آن می‌توانید تصاویر یا داده‌های خود را در کد HTML اسلاید کنید. با این حال، این ممکن است برای برخی مناسب نباشد، و اگر شما از جمله کسانی هستید که می‌خواهید بدون پرداختن به جزئیات راحت‌تر و سریع‌تر به نتیجه برسید، این بخش برای شما مناسب است.

اول از همه، ما به یک توسعه رایگان JS به نام Fotorama اشاره می کنیم که برای توسعه دهندگان اپلیکیشن موبایل که می خواهند از کشویی استفاده کنند بسیار کاربردی و مفید است.

همچنین یک نوار لغزنده تصویر زیبا وجود دارد.

علاوه بر چنین ایجاد دستی پوسته لمسی برای یک برنامه یا بازی، می توانید از یک چارچوب استفاده کنید. در اینجا لیستی از فریمورک های Sencha Touch، jQ Touch، jQuery Mobile که در این مبحث محبوب هستند، آمده است.

آخرین سوال، سازگاری همه اینها با پلتفرم های موبایل است. خوب، لمس از اندروید 2.3-4.X و IOS پشتیبانی می کند. اما مولتی تاچ به جز اندروید 2.3 توسط همه چیز پشتیبانی می شود.

فراموش نکنید که زمانی که اشیاء HTML از قبل شناخته شده باشند، باید کنترلرهایی را به آنها اختصاص دهید. در این رویداد window.onloadیا DOMContentLoaded.

اگر چیزی برای اضافه کردن به مقاله دارید - در نظرات بنویسید.

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

اگر برنامه وب شما به کاربر نیاز دارد که از ژست‌ها استفاده کند، مهم است که اقدامات صحیح را به او آموزش دهید - با استفاده از راهنما، مثال‌های متحرک یا نوع دیگری از اعلان‌ها (شکل 8.5).

برنج. 8.5. Google Fast Flip یک نمایشگر جدید است که از ژست‌های حرکتی در آیفون و دستگاه های اندرویدی. در سمت چپ، یک گفتگوی هشدار با دستورالعمل های نحوه استفاده از آن را مشاهده خواهید کرد. شما فقط یک بار دستورالعمل ها را مشاهده خواهید کرد.

ژست کشیدن انگشت

ژست کشیدن انگشت (همچنین به عنوان تلنگر شناخته می شود) یک فناوری مرورگر لمسی است که معمولاً برای حرکت دادن محتوا به جلو و عقب استفاده می شود. این ژست، به عنوان مثال، در بسیاری از گالری های عکس برای تغییر تصویر نمایش داده شده و در ارائه ها برای ورق زدن اسلایدها استفاده می شود. ماهیت ژست یک حرکت ساده انگشت در امتداد محور X از چپ به راست (کشیدن تند کشیدن افقی) یا در امتداد محور Y از بالا به پایین (کشیدن انگشت عمودی) است. ژست کشیدن انگشت تقریباً در هر دستگاه لمسی پشتیبانی می شود، زیرا با یک انگشت انجام می شود.

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

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

ترتیب دهی:

رویداد را قطع کنید (یا در iPhone و سایر مرورگرهای سازگار، شروع به کار کنید) و شروع به ضبط ژست کنید.

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

onmouseup را قطع کنید (یا ontouchend در آیفون و مرورگرها با پشتیبانی لازم) و اگر در آن لحظه ژست ادامه داشت (فعال بود) و تفاوت بین مختصات اولیه و نهایی بیشتر از یک ثابت خاص بود - کشیدن انگشت را در یک جهت تعریف کنید.

آخرین نقطه را می توان با یک تست حرکتی در حین پرواز در رویداد onmousemove جایگزین کرد.

اگر از jQuery در کار خود استفاده می‌کنید، می‌توانید از یک افزونه رایگان از http://plugins.jquery.com/project/swipe برای تشخیص ژست کش رفتن افقی در دستگاه‌های آیفون استفاده کنید.

با کمک کد زیر می توانیم یک کتابخانه شی گرا برای تشخیص سوایپ (سازگار با آیفون، اندروید و سایر دستگاه ها) ایجاد کنیم:

/** یک کنترل کننده حرکت رویداد تند کشیدن ایجاد می کند */ تابع MobiSwipe(id) ( // این را ثابت می کند.HORIZONTAL = 1؛ this.VERTICAL = 2؛ this.AXIS_THRESHOLD = 30؛ // کاربر خط کاملی را برای این تعریف نمی کند. GESTURE_DELTA = 60؛ // دلتای حداقل در محور برای شلیک ژست // اعضای عمومی this.direction = this.HORIZONTAL؛ this.element = document.getElementById(id)؛ this.onswiperight = null؛ this.onswipeleft = null ؛ this.onswipeup = null؛ this.onswipedown = null؛ this.inGesture = false؛ // اعضای خصوصی this._originalX = 0 this._originalY = 0 var _this = this؛ // باعث می شود عنصر روی این عنصر روی آیفون کلیک شود. onclick = function() (void(0))؛ var mousedown = function(event) (// فشردن انگشت event.preventDefault(); _this.inGesture = true؛ _this._originalX = (event.touches) ? event.touches. pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // فقط برای iPhone اگر (event.touches && event.touches.length!=1) ( _this.inGesture = نادرست؛ // لغو حرکت در چند لمس ) )؛ var mousemove = function(event) (// Finger moved event.preventDefault(); var delta = 0; // دریافت مختصات با استفاده از iPhone یا تکنیک استاندارد var currentX = (event.touches) ? event.touches.pageX: event.pageX ؛ var currentY = (event.touches) ? event.touches.pageY: event.pageY; // بررسی کنید که آیا کاربر همچنان با محور (_this.inGesture) (اگر ((_this.direction==_this) است یا خیر. HORIZONTAL)) (دلتا = ریاضی. abs(currentY-_this._originalY)؛ ) دیگری (دلتا = ریاضی. abs(currentX-_this._originalX); ) اگر (delta >_this.AXIS_THRESHOLD) (// لغو ژست، کاربر در محور دیگر حرکت می کند _this.inGesture = false; ) ) // بررسی کنید که اگر (_this.inGesture) می توانیم آن را یک تند در نظر بگیریم ( if (_this.direction==_this.HORIZONTAL) ( delta = Math.abs( currentX-_this._originalX)؛ if (currentX>_this._originalX) (جهت = 0; ) other ( جهت = 1; ) ) other (دلتا = ریاضی. abs(currentY-_this._originalY)؛ if (currentY>_this. _originalY) ( جهت = 2; ) other ( جهت = 3; ) ) if (delta >= _this.GESTURE_DELTA) ( // ژست شناسایی شد! var handler = null; سوئیچ (جهت) ( مورد 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; ) if (handler!=null) ( // فراخوانی با کنترل کننده دلتا اختیاری(delta); ) _this.inGesture = false; )))) // رویدادهای آیفون و اندروید this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function( ) ( _this.inGesture = false; ), false)؛ // همچنین باید عملکردهای mousedown و mousemove خود را به // رویدادهای استاندارد در دستگاه های سازگار اختصاص دهیم.

در اینجا یک مثال ساده از استفاده از کتابخانه swipe.js ما با کشیدن انگشت تشخیص افقی و دیگری با تشخیص عمودی آورده شده است:

Swipe Gesture Detection window.onload = function() ( var swipev = new MobiSwipe("عمودی"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() ( هشدار("پایین"); )؛ swipev.onswipeup = function() ( alert("بالا"); ); var swipeh = new MobiSwipe("افقی"); swipeh.direction = swipeh.HORIZONTAL; swipeh.onswiperight = function() ( هشدار("راست"); ); swipeh.onswipeleft = function() ( هشدار ("چپ"); ) ) کش رفتن عمودی تند کشیدن افقی

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

بزرگنمایی و چرخش حرکات

زمانی که آیفون برای اولین بار عرضه شد، جالب ترین ویژگی ها زوم و حرکات چرخشی بود. با استفاده از ژست نیشگون گرفتن (فشردن و باز کردن دو انگشت در یک نیشگون گرفتن)، کاربر می تواند روی محتوای صفحه - این معمولاً یک تصویر است - بزرگنمایی یا کوچکنمایی کند، و با چرخش دو انگشت در یک دایره، می توان تصویر را چرخاند. .

در دستگاه‌هایی که پشتیبانی چند لمسی وجود ندارد، عملکردهای زوم باید با استفاده از دکمه‌ها و لغزنده‌های شناور معمولی اجرا شوند.

خوشبختانه، با شروع iOS 2.0، این حرکات را می توان بدون توسل به ریاضیات سطح پایین در رویدادهای لمسی شناسایی کرد. جدول 8.35 سه افزونه WebKit را فهرست می کند که به عنوان رویداد در دسترس هستند. مرورگر اندروید نیز پشتیبانی از این رویدادها را اضافه کرده است.

از همان رویدادها برای مقیاس بندی و چرخش استفاده می شود. هر سه یک پارامتر GestureEvent دریافت می کنند. این پارامتر دارای ویژگی‌های رویداد معمولی و همچنین ویژگی‌های مقیاس و چرخش اضافی است.

ویژگی scale فاصله بین دو انگشت را به عنوان یک ضرب کننده ممیز شناور از ابتدای فاصله ای که حرکت شروع شده است مشخص می کند. اگر مقدار بزرگتر از 1.0 باشد، آنگاه یک پینچ باز (افزایش) است و اگر مقدار 1.0 باشد، به معنای نزدیک کردن (کاهش) است.

چرخش مقدار (بر حسب درجه) دلتا (فاصله) چرخش از نقطه شروع را می دهد. اگر کاربر شی را در جهت عقربه های ساعت بچرخاند، یک مقدار مثبت و اگر مخالف باشد، مقدار منفی خواهد بود.

من می دانم که در حال حاضر به چه چیزی فکر می کنید: "چرخش و مقیاس بندی عالی است، اما اگر با HTML کار کنیم چه فایده ای دارد؟". اینجاست که برنامه‌های افزودنی CSS برای Safari در iOS (و سایر مرورگرهای دارای پشتیبانی) با یک ویژگی و دو عملکرد برای کنترل مقدار آن کمک می‌کنند: چرخش و مقیاس.

تابع چرخش یک پارامتر را بر حسب درجه می گیرد و باید واحد درجه را بعد از عدد تعریف کنیم (مثلا rotate(90deg)). ما می توانیم این را از اسکریپت با استفاده از element.style.webkitTransform یاد بگیریم.

بیایید به یک مثال ساده نگاه کنیم:

ژست (رویداد) تابع مدیریت ژست (// مقادیر را با دو اعشار گرد می کنیم event.target.innerHTML = "Rotation:" + Math.round(event.rotation*100)/100 + "Scale:" + Math.round (رویداد .scale*100)/100; // توابع تبدیل را به عنصر اعمال می کنیم event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + "scale(" + event .scale + ")"؛ )

نحوه عملکرد مثال در شکل 8-6 قابل مشاهده است. در دستگاه‌های سازگار، می‌توانید از دو انگشت برای چرخش و زوم (همراه با تمام محتوا) استفاده کنید. اما مشکل اینجا چیست؟ سبک تبدیل همیشه به عنصر اصلی اعمال می شود. بنابراین، اگر مقیاس 2.0 را برای یک عنصر اعمال کنیم، و سپس دوباره آن را 0.5 افزایش دهیم، مقدار جدید 0.5 خواهد بود، نه 1.0 که ممکن است انتظار داشته باشیم.

برنج. 8.6. با ترکیب رویدادهای لمسی با تبدیل های CSS، می توانید عناصر را در سایت خود بچرخانید و مقیاس دهید.

برای رفتار معمولی زوم-چرخش، باید تابع را با زیر جایگزین کنیم:

چرخش var = 0; مقیاس var = 1; ژست تابع (رویداد) ( event.target.innerHTML = "چرخش: " + Math.round((event.rotation+rotation)*100)/100 + " Scale: " + Math.round((event.scale*scale) *100)/100; event.target.style.webkitTransform = "rotate(" + (event.rotation+rotation)%360 + "deg)" + "scale(" + event.scale*scale + ")"؛ ) تابع gestureend(رویداد) ( چرخش = رویداد. چرخش + چرخش؛ مقیاس = رویداد. مقیاس * مقیاس؛ )