تم إجراء تغيير صغير نسبيًا على Touch API في 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 درجة أفقي). Why only
90 degrees? ما عليك سوى استخدام 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 لتغيير زاوية تلامس الفرشاة على اللوحة.
- ميزة التعرّف المحسّن على الإيماءات: إذا كنت تعرف كيفية استخدام سمة rotationAngle، يمكنك إنشاء إيماءة إصبع واحدة لتدوير كائن.
هل تتوفّر هذه الميزة في كل الأجهزة؟
لا، هذه الميزة ليست شائعة بعد. إذا كان لديك جهاز Nexus 10، سيظهر لك ما يلي:
حقوق الصورة مملوكة لريك بيرز.
عندما يتعذّر على الجهاز فهم زاوية دوران لمسة، ستكون قيمة
rotationAngle هي 0 وستكون قيمتَا radiusX وradiusY
متساويتين (ولكن قد تختلفان حسب مساحة سطح اللمس الحالية).
ما هي أهميته؟
سؤال جيد. مثل العديد من الميزات على الويب، هذه تجربة إضافية.
ستعمل أحداث اللمس عندما تكون متاحة، وإذا كانت قيم الأقطار ودرجة الدوران
متوفّرة، يمكنك تحسين تطبيقك لتزويد المستخدم بتجربة
أكثر كفاءة. لا يمتلك كل مستخدم جهاز لوحي من Wacom، ولكن في حال توفّره، ستستفيد منه العديد من تطبيقات الرسم.
ماذا عن أحداث المؤشر؟
نهدف فقط إلى التأكّد من توفّر واجهة برمجة تطبيقات كاملة لواجهة لمس للمطوّرين الذين يعتمدون عليها. لاحظ كيف تجنّبت الإجابة عن السؤال قليلاً... على نحوٍ أكثر جدية، إذا كنت مهتمًا بمواكبة تنفيذ PointerEvent في Blink، يمكنك وضع علامة على الطلب 471824 وقراءة مستند التتبّع الخاص بـ Rick Byers.