لمسة دقيقة للإيماءات الدقيقة

حدث تغيير في تنفيذ TouchEvents من Chrome اعتبارًا من M37 (الثابتة في 08/2014)، والتي تغيّر الإحداثيات التي تم الإبلاغ عنها إلى أعداد عشرية بدلاً من الأعداد الصحيحة.

قبل بعد
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.66700744628906.
380383828906


نتيجة هذا التغيير تعني الحصول على استجابة أكثر سلاسة لإيماءات المستخدمين، لأنه يمنحك دقة أعلى في موضع الأصابع.

باستخدام العرض التوضيحي لريك بايرز، يمكنك ملاحظة الاختلاف الكبير الذي يمكن أن يحدثه هذا عند رسم دوامة ببطء.

الاختلافات في أحداث اللمس.

لن يؤثر هذا إلا في الشاشات التي تكون كثافة وحدات البكسل فيها أكبر من 1. لفهم السبب، دعونا نستعرض مثالاً.

تخيل أن لديك شبكة من وحدات بكسل CSS بتنسيق 3×3 وكثافة الشاشة 3، ما يعني أننا لدينا شبكة من وحدات بكسل فعلية مقاس 9×9 وإيماءات المستخدم من أعلى اليسار إلى أسفل اليمين.

شبكة بكسل CSS ووحدات بكسل الشاشة

في البداية، قرّبنا موضع اللمس إلى أقرب وحدة بكسل CSS، وهو ما يعني أنه في هذه الإيماءة، ينتهي بك الأمر بالخطوات التالية.

دقة بكسل CSS أثناء الإيماءة.

يفوتنا رسم أي من الخطوات المتوسطة التي قد تظهر بها وحدات البكسل الفعلية عندما يحرك المستخدم إصبعه.

الآن بعد أن تحولنا إلى أعداد عشرية، يمكن أن تبدو إيماءتنا على هذا النحو.

تعويم الدقة أثناء الإيماءة.

في معظم الحالات، لن يتطلب ذلك إجراء أي تغييرات في الرمز البرمجي لموقعك الإلكتروني، ولكنه يعني أنّ أي صور متحركة أو حركات تؤديها نتيجة أحداث TouchEvents ستكون أكثر سلاسة، خاصةً بالنسبة للإيماءات البطيئة.

ومن المقرّر أيضًا تطبيق هذا التحسين على متصفّح Safari على الأجهزة الجوّالة أيضًا: https://bugs.webkit.org/show_bug.cgi?id=133180.