یک تغییر نسبتاً کوچک در Touch API در Chrome در Chrome 39 ایجاد شد، که یک نسخه فعال از ویژگی webkitRotationAngle را در شی TouchEvent معرفی کرد. اکنون در کروم 45 (بتا در ژوئیه 2015)، بدون پیشوند به عنوان rotationAngle است که پیاده سازی ما را با مشخصات TouchEvent و Firefox هماهنگ می کند.
اگرچه مدتی است که وجود داشته است، اما ارزش توضیح دادن rotationAngle را دارد زیرا استفاده جالب تری از حرکات لمسی به ویژه در دستگاه های تلفن همراه را نشان می دهد.
از نظر فنی، زاویه چرخش تعداد درجه (بین 0 تا 90) بیضی ناحیه تماس است که توسط Touch.radiusX و Touch.radiusY تعریف شده است. آره، باحال، درسته؟ (لازم به ذکر است که من فقط متوجه شدم که کروم در اندروید مقادیر radiusX و radiusY را روی 64 پیکسل قفل نمی کند، بلکه بسته به اندازه مخاطب صفحه آن را تغییر می دهد).
در واقع به چه معناست؟
به آن به عنوان راهی برای نمایش دقیق اندازه، شکل و جهت انگشت کاربر روی صفحه فکر کنید. کاربران همیشه با نوک انگشت خود به صفحه نمایش ضربه نمی زنند، بلکه اغلب صفحه نمایش را فشار می دهند که انگار به پلیس اثر انگشت می دهند. بدون rotationAngle می توانید به راحتی متوجه شوید که ژست لمسی چقدر پهن و چقدر بلند است. با rotationAngle 90 درجه چرخش (0 عمودی و 90 افقی) بدست می آورید. چرا فقط 90 درجه؟ شما فقط به 90 درجه نیاز دارید، زیرا با عبور از آن زوایا radiusX و radiusY تغییر خواهند کرد تا با هم سازگار شوند.
نکته جالب دیگر در این مورد این است که ناحیه تماس انگشت کاربر با تغییر درجه فشار انگشت روی صفحه نمایش تغییر می کند. این یک جایگزین مستقیم برای force نیست، اما می‌توانید بین برس‌های سبک روی صفحه تمایز قائل شوید زیرا سطح آن‌ها نسبت به پرس سخت‌تر، سطح کمتری دارند.
چگونه می توانم از آن استفاده کنم؟
ابتدا به دستگاهی نیاز دارید که بتواند این را تشخیص دهد. Nexus 10 به خوبی کار خواهد کرد. یک مثال عالی این است که مستقیماً به نمونه نقاشی Rick Byers نگاه کنید. البته در اینجا راهی برای استفاده از آن بدون بوم وجود دارد.
var touchHandler = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var touch = touches[0]; // only concerned about first touch.
var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
var force = touch.force || touch.webkitForce || 0;
// Use the rotationAngle to rotate the 'p' element.
p.style.width = radiusX * 2 + 'px';
p.style.height = radiusY * 2 + 'px';
p.style.transform = "rotate(" + rotationAngle + "deg)";
};
document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;
کجا از این در عمل استفاده می کنید؟
مکان‌های واضحی وجود دارد که این امر فوراً برای کاربر مفید خواهد بود:
- به عنوان مثال، برنامه های وب نقاشی و دستکاری تصویر می توانند از این اطلاعات برای تغییر ضربه یا افکت های اعمال شده بر روی بوم استفاده کنند. می توانید از شعاع لمسی برای تغییر اندازه قلم مو استفاده کنید و می توانید زاویه چرخش را برای تغییر زاویه تماس قلم مو روی بوم ترکیب کنید.
- تشخیص ژست پیشرفته: اگر زاویه چرخش را درک می کنید، می توانید یک حرکت انگشت برای چرخاندن یک شی ایجاد کنید.
آیا هر دستگاهی این را پشتیبانی می کند؟
نه. هنوز خیلی رایج نیست. اگر Nexus 10 دارید چیزی شبیه به زیر خواهید دید:
اعتبار تصویر به ریک بایرز .
وقتی دستگاهی نتواند زاویه چرخش لمس را درک کند، rotationAngle 0 و مقادیر radiusX و radiusY برابر خواهند بود (اما ممکن است بسته به سطح لمس فعلی متفاوت باشد).
چرا زحمت؟
سؤال خوبی بود. مانند بسیاری از ویژگی‌های وب، این یک تجربه افزودنی است.
رویدادهای لمسی زمانی کار می‌کنند که پشتیبانی شوند، و اگر مقادیر شعاع و چرخش در دسترس باشند، می‌توانید برنامه‌تان را بهبود ببخشید تا تجربه‌ای توانمندتر به کاربر بدهید. هر کاربر تبلت Wacom ندارد، اما در صورت وجود، بسیاری از برنامه های نقاشی از آن بهره می برند.
در مورد رویدادهای اشاره گر چطور؟
این واقعاً فقط برای اطمینان از داشتن یک API رویداد لمسی کامل برای توسعه دهندگانی است که به آن متکی هستند. ببینید چگونه من کمی از این سوال طفره رفتم... به طور جدی تر، اگر مایلید پیاده سازی PointerEvent Blink را دنبال کنید، می توانید شماره 471824 را ستاره دار کنید و سند ردیابی ریک بایرز را بخوانید.