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