सटीक जेस्चर के लिए सटीक टच

M37 (08/2014 में स्टेबल) के बाद, Chrome के TouchEvents को लागू करने के तरीके में बदलाव किया गया है. इससे, रिपोर्ट किए गए निर्देशांकों को पूर्णांक के बजाय फ़्लोट में बदल दिया जाता है.

पहले बाद में
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
radiusX: 25.843116760253906
radiusY: 25.843116760253906
screenX: 167.33334350585938
screenY: 276.66668701171875

इस बदलाव का मतलब है कि आपको उपयोगकर्ताओं के जेस्चर के लिए बेहतर रिस्पॉन्स मिलेगा. ऐसा इसलिए, क्योंकि इससे आपको उंगलियों की पोज़िशन के बारे में ज़्यादा सटीक जानकारी मिलती है.

रिक बायर्स के डेमो का इस्तेमाल करके, यह देखा जा सकता है कि धीरे-धीरे स्विर ड्रॉ करने पर, इसमें कितना बड़ा फ़र्क़ पड़ सकता है.

टच इवेंट में अंतर.

इसका असर सिर्फ़ उन स्क्रीन पर पड़ेगा जिनकी पिक्सल डेंसिटी 1 से ज़्यादा है. इसकी वजह जानने के लिए, एक उदाहरण देखें.

मान लें कि आपके पास सीएसएस पिक्सल का 3x3 ग्रिड है और स्क्रीन डेंसिटी 3 है. इसका मतलब है कि हमारे पास 9x9 फ़िज़िकल पिक्सल का ग्रिड है और उपयोगकर्ता के जेस्चर, सबसे ऊपर बाएं से सबसे नीचे दाईं ओर हैं.

सीएसएस पिक्सल और स्क्रीन पिक्सल ग्रिड.

शुरुआत में, हम टच की पोज़िशन को सबसे नज़दीकी सीएसएस पिक्सल पर राउंड कर रहे थे. इसका मतलब है कि इस जेस्चर में आपको ये चरण पूरे करने होंगे.

जेस्चर के दौरान सीएसएस पिक्सल की सटीक जानकारी.

हम बीच के किसी भी चरण को नहीं दिखाते, जो उपयोगकर्ता के उंगली को हिलाने पर, फ़िज़िकल पिक्सल दिखा सकते हैं.

फ़्लोट पर स्विच करने के बाद, हमारा जेस्चर कुछ ऐसा दिख सकता है.

जेस्चर के दौरान फ़्लोटिंग प्रिसीज़न.

ज़्यादातर मामलों में, इसके लिए आपको अपने कोड में कोई बदलाव नहीं करना होगा. हालांकि, इसका मतलब है कि TouchEvents की वजह से होने वाले ऐनिमेशन या मूवमेंट, ज़्यादा बेहतर तरीके से काम करेंगे. खास तौर पर, धीमे जेस्चर के लिए.

इस सुविधा को Safari के मोबाइल वर्शन में भी उपलब्ध कराने की योजना है: https://bugs.webkit.org/show_bug.cgi?id=133180.