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