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

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

قبل بعد
clientX: 167
clientY: 196
pageX: 167
pageY: 196
نصف القطر 26
نصف القطر 26
نصف القطر Y: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.66700744628903
2


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

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

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

سيؤدي هذا فقط إلى التأثير في الشاشات ذات كثافة البكسل أكبر من 1. لفهم السبب، لننتقل إلى مثال.

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

CSS Pixel وشبكة بكسل الشاشة.

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

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

نفوّت رسم أي من الخطوات المتوسطة التي يمكن أن تعرضها وحدات البكسل المادية أثناء تحريك المستخدم لإصبعه.

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

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

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

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