Chrome में Touch API में थोड़ा बदलाव किया गया. यह बदलाव Chrome 39 में किया गया. इसमें TouchEvent ऑब्जेक्ट पर webkitRotationAngle एट्रिब्यूट का काम करने वाला वर्शन पेश किया गया. अब Chrome 45 (जुलाई 2015 में बीटा वर्शन) में, इसे rotationAngle के तौर पर बिना प्रीफ़िक्स के इस्तेमाल किया जाता है. इससे, हमारे लागू करने का तरीका TouchEvent की खास जानकारी और Firefox के साथ ज़्यादा अलाइन हो जाता है.
हालांकि, यह सुविधा कुछ समय से उपलब्ध है, लेकिन rotationAngle के बारे में बताना ज़रूरी है. इसकी वजह यह है कि इससे टच जेस्चर के कुछ और दिलचस्प इस्तेमाल किए जा सकते हैं. खास तौर पर, मोबाइल डिवाइसों पर.
तकनीकी तौर पर, रोटेशन ऐंगल, Touch.radiusX और Touch.radiusY से तय किए गए संपर्क क्षेत्र के एलिप्स की डिग्री (0 से 90 के बीच) होती है.
अरे, बढ़िया है न? (ध्यान दें कि मुझे सिर्फ़ यह पता चला है कि Android पर Chrome, 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;
प्रैक्टिस के दौरान इसका इस्तेमाल कहां किया जा सकता है?
कुछ ऐसी जगहें हैं जहां उपयोगकर्ता को तुरंत फ़ायदा मिलेगा:
- उदाहरण के लिए, पेंटिंग और इमेज में बदलाव करने वाले वेब ऐप्लिकेशन, इस जानकारी का इस्तेमाल करके कैनवस पर लागू किए गए स्ट्रोक या इफ़ेक्ट में बदलाव कर सकते हैं. ब्रश का साइज़ बदलने के लिए, टच रेडियस का इस्तेमाल किया जा सकता है. साथ ही, कैनवस पर ब्रश के संपर्क के ऐंगल को बदलने के लिए, rotationAngle को जोड़ा जा सकता है.
- हाथ के जेस्चर की पहचान करने की बेहतर सुविधा: अगर आपको rotationAngle के बारे में जानकारी है, तो एक उंगली से किया जाने वाला हाथ का जेस्चर बनाया जा सकता है. इससे किसी ऑब्जेक्ट को घुमाया जा सकता है.
क्या यह सुविधा हर डिवाइस पर काम करती है?
नहीं. फ़िलहाल, यह बहुत आम नहीं है. अगर आपके पास Nexus 10 है, तो आपको कुछ ऐसा दिखेगा,
इमेज क्रेडिट: रिक बायर्स.
जब कोई डिवाइस, टच के रोटेशन के ऐंगल को नहीं समझ पाता है, तो rotationAngle की वैल्यू 0 होगी. साथ ही, radiusX और radiusY की वैल्यू बराबर होंगी. हालांकि, मौजूदा टच के प्लैटफ़ॉर्म के हिसाब से, वैल्यू अलग-अलग हो सकती हैं.
इतनी मेहनत क्यों करनी?
यह अच्छा सवाल है. वेब पर मौजूद कई सुविधाओं की तरह, यह भी एक अतिरिक्त सुविधा है.
टच इवेंट, काम करने पर काम करेंगे. साथ ही, अगर त्रिज्या और रोटेशन वैल्यू उपलब्ध हैं, तो उपयोगकर्ता को बेहतर अनुभव देने के लिए, ऐप्लिकेशन को बेहतर बनाया जा सकता है. हर उपयोगकर्ता के पास Wacom टैबलेट नहीं होता. हालांकि, जब यह मौजूद होता है, तो पेंटिंग वाले कई ऐप्लिकेशन इसका फ़ायदा लेते हैं.
पॉइंटर इवेंट के बारे में क्या जानकारी है?
इसका मकसद सिर्फ़ यह पक्का करना है कि हमारे पास उन डेवलपर के लिए पूरी तरह से तैयार टच इवेंट एपीआई हो जो इस पर भरोसा करते हैं. देखा आपने, मैंने कैसे सवाल का जवाब देने से बचने की कोशिश की... अगर आपको Blink के PointerEvent को लागू करने के बारे में ज़्यादा जानना है, तो समस्या 471824 को स्टार करें और रिक बायर्स का ट्रैकिंग दस्तावेज़ पढ़ें.