هناك تغيير بسيط نسبيًا في واجهة برمجة التطبيقات Touch API في Chrome وصل إلى
Chrome 39، ما أدى إلى تقديم إصدار صالح للسمة webkitRotationAngle على
الكائن TouchEvent. والآن في Chrome 45 (الإصدار التجريبي في تموز/يوليو 2015)، لم يسبق له إصدار rotationAngle، ما جعل عملية التنفيذ أكثر توافقًا مع مواصفات TouchEvent
وFirefox.
مع أنّ الميزة لم تكن متوفّرة منذ فترة، من المهم توضيح معنى
rotationAngle لأنّها تتيح استخدام إيماءات اللمس بطريقة أكثر تشويقًا على الأجهزة الجوّالة،
خاصةً على الأجهزة الجوّالة.
من الناحية الفنية، زاوية الدوران هي عدد الدرجات (بين 0 و90) للقطع الناقص من منطقة جهة الاتصال المحدّدة من خلال الترميزَين Touch.radiusX
وTouch.radiusY.
إرهاب، رائع، أليس كذلك؟ (تجدر الإشارة إلى أنّني اكتشفت فقط أنّ متصفّح Chrome على
Android لا يقفل القيمتَين 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، سيظهر لك ما يلي:
تعود ملكية الصورة إلى Rick Byers.
عندما يتعذّر على الجهاز فهم زاوية الدوران للمس، ستكون قيمة rotationAngle 0 وستكون القيمتان radiusX وradiusY متساويتين (ولكنهما قد تختلفان حسب مساحة سطح اللمس الحالية).
ما سبب الإزعاج؟
سؤال جيد. ومثلها مثل العديد من الميزات على الويب، تعتبر هذه تجربة إضافة.
تعمل أحداث اللمس عند توافقها، وفي حال توفرت قيم نصف القطر والتدوير، يمكنك تحسين تطبيقك لمنح المستخدم تجربة أفضل. ليس لدى كل مستخدم جهاز لوحي من Wacom، ولكن عند توفُّره، سيستفيد منه العديد من تطبيقات الرسم.
ماذا عن أحداث المؤشر؟
يتعلّق هذا بالتأكد من أنّ لدينا واجهة برمجة تطبيقات شاملة لفعاليات اللمس للمطوّرين الذين يعتمدون عليها. انظر كيف تجنّبت السؤال قليلاً... إذا كنت مهتمًا باتّباع عملية تنفيذ PointerEvent على Blink، يمكنك تمييز المشكلة 471824 بنجمة، وقراءة مستند التتبُّع لفريق "ريك بايرز".