चुटकी ज़ूम इन, ज़ूम आउट - एंड्रॉइड मंच पर वेब के लिए जावास्क्रिप्ट/jquery/jquery मोबाइल इवेंट?

Question

चुटकी ज़ूम इन और ज़ूम आउट में शामिल जावास्क्रिप्ट या jquery या jquery मोबाइल इवेंट्स क्या हैं? मैं उन घटनाओं को ज़ूम इन करने और वेबसाइट के पूरे लेआउट को प्रभावित किए बिना एक छवि के बाहर ज़ूम करने के लिए ज़ूम इन करने की कोशिश कर रहा हूं। Simplest way to detect a pinch आईपैड के लिए काम करता है लेकिन एंड्रॉइड नहीं।

वेब के लिए एंड्रॉइड मंच पर इसका पता लगाने के बराबर तरीका क्या हैं?

किसी भी मदद की सराहना की जाती है।

संपादित करें: मैं touchy.js कोशिश कर रहे हैं और कहा कि जूम-इन और छवियों के लिए ज़ूम आउट लेकिन, एक छवि में ज़ूम करने के लिए काम करता है उपयोगी अगर छवि के हिस्से उंगली कड़ी चोट या कुछ और से सुलभ नहीं है नहीं है उस तरह के।

उदाहरण के लिए, निम्नलिखित कोड पर विचार करें:। मैं div के अंदर रहने के छवि की जरूरत

<div style=" border: 1px solid blue; width: 560px; overflow:scroll;"> 
     <p>&nbsp;</p> 
     <img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" /> 
    </div> 

और उपयोगकर्ता छवि के चारों ओर ले जाने के लिए के बाद वे में ज़ूम में सक्षम होना चाहिए लेकिन इस कोड के साथ, मैं क्षैतिज रूप से छवि के विभिन्न भाग पर जाने के लिए खाली क्षेत्र (अनुच्छेद टैग द्वारा बनाई गई) पर अपनी अंगुली को स्वाइप करना होगा। वही लंबवत होता है (छवि को लंबाई के अनुसार देखने के लिए आपको वेब पेज पर खाली स्थान पर अपनी अंगुली को स्वाइप करना होगा)। मैं जो कहने की कोशिश कर रहा हूं वह है, छवि के अंदर स्वाइपिंग गति का कोई प्रभाव नहीं है जबकि उपयोगकर्ता छवि में ज़ूम करने के बाद ऐसा करने की अपेक्षा करते हैं।

उदाहरण के बिना व्याख्या करना बहुत मुश्किल है और मैंने http://jsfiddle.net/Debarupa/8peaf/ बनाने की कोशिश की लेकिन यह काम नहीं करता क्योंकि मैं इसे मेटा में संपादित नहीं कर सकता क्योंकि मैं इसे पसंद करूंगा। मुझे जोड़ने की जरूरत है:

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1" /> 

ताकि पूरा वेबपृष्ठ ज़ूम करने योग्य न हो।

Answer 1

आप उपयोगकर्ता के इशारे की निगरानी करके और अपनी उंगलियों के संपर्क के बिंदुओं को ट्रैक करके अपने पैमाने की गणना कर सकते हैं।

कुछ की तरह:

var tracks = []; 
$myElement.on("touchmove", function (event) { 

    //only run code if the user has two fingers touching 
    if (event.originalEvent.touches.length === 2) { 

     //track the touches, I'm setting each touch as an array inside the tracks array 
     //each touch array contains an X and Y coordinate 
     tracks.push([ [event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY], [event.originalEvent.touches[1].pageX, event.originalEvent.touches[1].pageY] ]); 
    } 
}).on("touchstart", function() { 
    //start-over 
    tracks = []; 
}).on("touchend", function() { 
    //now you can decide the scale that the user chose 
    //take the track points that are the closest and determine the difference between them and the points that are the farthest away from each other 
}); 

लेकिन, आप कुछ पूर्व बनाया उपयोग करना चाहते हैं, तो मैं जाँच-आउट भावुक सुझाव देते हैं: https://github.com/HotStudio/touchy