تغییر نسبتاً کوچکی در Touch API در Chrome در
Chrome 39 اعمال شد که
نسخه فعال مشخصه webkitRotationAngle را در
شیء TouchEvent معرفی کرد. اکنون در Chrome 45 (نسخه بتا در ژوئیه ۲۰۱۵)، پیشوند آن به‌عنوان rotationAngle برداشته شده است،
که پیاده‌سازی ما را بیشتر با
TouchEvent
Spec و Firefox همسو می‌کند.
اگرچه مدتی است که وجود دارد، اما ارزش توضیح دادن دارد که
rotationAngle چیست زیرا استفاده جالب‌تری از اشاره‌های لمسی
به‌ویژه در دستگاه‌های همراه را باز می‌کند.
از نظر فنی، زاویه چرخش تعداد درجات (بین ۰ تا ۹۰)
بیضی ناحیه تماس است که توسط
Touch.radiusX
و
Touch.radiusY تعریف می‌شود.
جالب است، نه؟ (باید توجه داشت که من فقط متوجه شدم که Chrome در
Android مقادیر radiusX و radiusY را روی ۶۴ پیکسل قفل نمی‌کند، بلکه
آن را بسته به اندازه تماس صفحه تغییر می‌دهد).
این واقعاً به چه معنا است؟
این را به‌عنوان راهی برای نمایش دقیق اندازه، شکل، و جهت
انگشت کاربر روی صفحه‌نمایش درنظر بگیرید. کاربران همیشه با نوک انگشت روی صفحه‌نمایش ضربه نمی‌زنند، بلکه اغلب صفحه‌نمایش را طوری فشار می‌دهند که انگار درحال دادن اثر انگشت به پلیس هستند. بدون rotationAngle، فقط
عرض و ارتفاع اشاره لمسی را دریافت می‌کنید. با rotationAngle،
۹۰ درجه چرخش (۰ عمودی و ۹۰ افقی) دریافت می‌کنید. چرا فقط
۹۰ درجه؟ فقط به ۹۰ درجه نیاز دارید چون وقتی از این زاویه‌ها عبور می‌کنید،
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;
در عمل کجا از این استفاده می‌کنید؟
چند مورد واضح وجود دارد که این ویژگی می‌تواند فوراً برای کاربر مفید باشد:
- برای مثال، برنامه‌های وب نقاشی و دستکاری تصویر می‌توانند از این اطلاعات برای تغییر دادن قلم‌ضربه یا جلوه‌های اعمال‌شده روی بوم استفاده کنند. می‌توانید از شعاع لمس برای تغییر اندازه قلم‌مو استفاده کنید و می‌توانید rotationAngle را ترکیب کنید تا زاویه تماس قلم‌مو روی بوم را تغییر دهید.
- تشخیص اشاره بهبودیافته: اگر rotationAngle را درک کنید، می‌توانید اشاره یک‌انگشتی ایجاد کنید تا شیء بچرخد.
آیا همه دستگاه‌ها از این ویژگی پشتیبانی می‌کنند؟
نه. هنوز خیلی رایج نیست. اگر Nexus 10 دارید، چیزی شبیه به تصویر زیر خواهید دید،
صاحب امتیاز تصویر ریک بایرز.
وقتی دستگاه نتواند زاویه چرخش لمس را درک کند،
rotationAngle برابر با ۰ خواهد بود و مقادیر radiusX و radiusY
برابر خواهند بود (اما ممکن است بسته به مساحت سطح لمس فعلی متفاوت باشند).
چرا زحمت بکشید؟
سؤال خوبی است. مانند بسیاری‌از ویژگی‌های وب، این یک تجربه افزایشی است.
رویدادهای لمسی درصورت پشتیبانی شدن کار خواهند کرد و اگر مقادیر شعاع و چرخش دردسترس باشد، می‌توانید برنامه‌تان را بهبود دهید تا تجربه توانمندتری به کاربر ارائه دهید. همه کاربران رایانه لوحی Wacom ندارند، اما وقتی این رایانه لوحی وجود داشته باشد، بسیاری از برنامه‌های نقاشی از آن بهره می‌برند.
رویدادهای اشاره‌گر چطور؟
این واقعاً فقط برای اطمینان از این است که ما یک میانای برنامه‌سازی کاربردی رویداد لمسی کاملاً توسعه‌یافته برای توسعه‌دهندگانی که به آن متکی هستند داشته باشیم. ببینید چطور کمی از پاسخ دادن به سؤال طفره رفتم... اما جدی‌تر، اگر به دنبال کردن پیاده‌سازی PointerEvent در Blink علاقه‌مند هستید، می‌توانید مشکل ۴۷۱۸۲۴ را ستاره‌دار کنید و سند ردیابی ریک بایرز را بخوانید.