Wie bekomme ich die X & Y auf PinchOpen und PinClose-Events in JGest Jquery Bibliothek?

Question

Ich verwende die jGesture jquery-Bibliothek für Gestenereignisse. Gemäß der Dokumentation sind Delta und Richtung für Gestenereignisse nicht verfügbar. manchmal http://jgestures.codeplex.com/documentation

$('body').bind('pinchopen pinchclose', function(el, ev) { 
    if (ev.description === 'pinch:+1:open') { 
     alert('pinchopen'); 
    } else if (ev.description === 'pinch:-1:close') { 
     alert('pinchclose'); 
    } 
}); 

Ich versuchte Berührungsstartereignis zu verwenden, um die pageX und pageY zu verfolgen, sobald die Figur berührt wird und diese Koordinaten in pinchopen/Schließen-Ereignisse verwenden, aber diese Ereignisse zur gleichen Zeit aufrufen nicht. Gibt es einen anderen Weg?

Answer 1

Ich habe die Problemumgehung für dieses Problem herausgefunden, indem ich die X & Y-Koordinaten im TouchStart-Ereignis in einer globalen Variablen gespeichert und in pinchopen/close-Ereignissen verwendet habe.

window.PageX = 0; 
window.PageY = 0; 

$('#mainContainer').bind('swipemove', function(event){ event.preventDefault();}); 
$('#mainContainer').bind('pinchopen pinchclose', function(el, ev) { 
    if (ev.description === 'pinch:+1:open') { 
     alert('pinchopen' + window.PageX); 
    } else if (ev.description === 'pinch:-1:close') { 
     alert('pinchclose' + window.PageY); 
    } 
}); 

document.getElementById('mainContainer').addEventListener('touchstart', function(e) { 
    window.PageX = e.changedTouches[0].pageX; 
    window.PageY = e.changedTouches[0].pageY; 
}, false); 

Answer 2

Sie können einfach ev.scale Eigenschaft verwenden. Beispiel Skalenwert beim Zoomen aus: 0,6803972721099854

var i = 300; 
$('#element_id').bind('swipemove', function(event){ event.preventDefault();}); 
$('#element_id').bind('pinchopen pinchclose', function(el, ev) { 
    i *= ev.scale; 
    $('#element_id').css("width",i+"px"); 
}); 

Html für dieses Beispiel

<div style="width:300px;height:300px;overflow:hidden"> 
<img width="300" id="element_id" src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" />