حدث تغيير بسيط نسبيًا في واجهة برمجة التطبيقات 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 بشكل جيد. حاسمة المثال الرائع هو النظر مباشرة إلى مثال عن رسم "ريك بايرز". لا تفوِّت الفرصة. ولكن إليك طريقة لاستخدامها بدون لوحة رسم.
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 بنجمة اقرأ "ريك بايرز" مستند تتبُّع