जावास्क्रिप्ट ज़ूमरचेंज और जेस्चरेंड का उपयोग करके ज़ूम करें और घुमाएं

Question

मैं कुछ स्पर्श घटनाओं और संकेतों पर काम कर रहा हूं, मैं ऑब्जेक्ट को ज़ूम और घुमाने में सक्षम होना चाहता हूं, मैंने इसे सफलतापूर्वक खींच लिया है लेकिन इशारा मुझे परेशानी दे रहे हैं। इशारे काम कर रहे हैं लेकिन वे चंचल हैं, जब भी आप इसे ज़ूम इन या ज़ूम आउट करने या इसे घुमाने की कोशिश करते हैं, तो यह उंगली से उंगली तक कूद जाता है।

संदर्भ के लिए मेरा कोड यहां है।

var width = 300; var height = 300; var rotation = 0; 
$('.dynamic').live("gesturechange gestureend", function(e){ 
var orig = e.originalEvent; 

if(e.type == 'gesturechange'){ 
    e.preventDefault(); 
    $(this).css("width", parseFloat(width) * orig.scale); 
    $(this).css("height", parseFloat(height) * orig.scale); 
    $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)"); 
}else if(e.type == 'gestureend'){ 
    a.w[ids] = parseFloat(width) * orig.scale; 
    a.h[ids] = parseFloat(height) * orig.scale; 
    a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360; 
} 
}); 

वहाँ वैसे भी इस चिकनी बनाने के लिए, और यह उंगलियों से कूद से रोका जा सके, या दृष्टिकोण मैं गलत ले लिया है कर रहे हैं। कुछ युक्तियाँ और चालें और की जरूरत मदद

thats एक समाधान

खींचें के लिए मेरे स्पर्श घटना की तरह लगता है इशारों में हस्तक्षेप पाया कारण है कि यह उंगली से उंगली करने के लिए कूद रखा, इस चारों ओर जिस तरह से उपयोग नहीं किया गया था इशारा करते हुए इशारा करते हुए इशारा करते हैं और इसके बजाय टच स्टार्ट, एंड एंड चेंज का उपयोग करते हैं।

यहाँ कोड

var touches = 0; var width = 300; var height = 300; var rotation = 0; 
$('.dynamic').live("touchstart touchmove touchend", function(e){ 
var orig = e.originalEvent; 

if(e.type == 'touchstart'){ 
if(orig.touches.length == 1){ 
    touches = 1; 
}else if(orig.touches.length == 2){ 
    touches = 2; 
} 
}else if(e.type == 'touchmove'){ 
e.preventDefault(); 
if(touches == 2){ 
     $(this).css("width", parseFloat(width) * orig.scale); 
     $(this).css("height", parseFloat(height) * orig.scale); 
     $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)"); 
} 
}else if(e.type == 'touchend'){ 
    if(touches == 2){ 
     a.w[ids] = parseFloat(width) * orig.scale; 
     a.h[ids] = parseFloat(height) * orig.scale; 
     a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360; 
    } 
} 
}); 

Answer 1

आपका समाधान काम करता है, लेकिन यह सबसे खूबसूरत नहीं है: आप अभी भी कोड के अपने पहले टुकड़ा का उपयोग करें और gesture घटनाओं पर भरोसा कर सकते हैं।
आपको बस इतना करना है कि touch ईवेंट हैंडलर आपके gesture वाले लोगों में हस्तक्षेप नहीं करते हैं।
बस touch ईवेंट हैंडलर्स में जोड़ें:

$('.dynamic').live("touchstart touchmove touchend", function(e){ 
    if(e.originalEvent.touches.length > 1) 
     return; 
    /* your touch code here */ 
}); 

और फिर अपने मौजूदा इशारा कोड का उपयोग करें:

$('.dynamic').live("gesturechange gestureend", function(e){ 
    /* your gesture code here */ 
}); 

यह काम करना चाहिए क्योंकि इशारा घटनाओं ट्रिगर कर रहे हैं केवल वहाँ दो या अधिक अंगुलियों को स्पर्श स्क्रीन, और ऐसा होने पर कोई अन्य कोड निष्पादित नहीं होता है, क्योंकि टच इवेंट हैंडलर केवल एक स्पर्श को प्रतिसाद देते हैं।

Answer 2

शायद इस कार्य के लिए jquery सबसे अच्छा नहीं है। आप sencha touch का उपयोग करने के बारे में सोच सकते हैं। यह पहले से ही करता है जो आप बहुत अच्छी तरह से चाहते थे। demos पर एक नज़र डालें। आप जो करना चाहते हैं उसके आधार पर jQuery Mobile भी एक अच्छा विकल्प होगा।