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