szczypta powiększyć, pomniejszyć - javascript/jquery/jquery mobilne wydarzenia dla sieci na platformie Android?

Question

Jakie są ruchome zdarzenia jQuery lub jquery związane z powiększaniem i pomniejszaniem? Próbuję uchwycić te zdarzenia, aby powiększyć i pomniejszyć obraz, który znajduje się wewnątrz elementu div bez wpływu na cały układ witryny. Simplest way to detect a pinch działa na iPada, ale nie na Androida.

Jaki jest równoważny sposób wykrywania tego samego na platformie Android w Internecie?

Każda pomoc jest doceniana.

EDIT: staram touchy.js i że działa za to zoom-in i zoom-out dla obrazów ale powiększając obraz nie jest przydatna, jeśli część obrazu nie jest przystosowany palcami lub coś tego rodzaju.

Rozważmy na przykład następujący kod:.

<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> 

muszę obraz, aby pozostać wewnątrz div, a użytkownik powinien być w stanie poruszać się po obrazie po powiększać Ale z tego kodu, I musisz przesunąć palcem po pustym obszarze (utworzonym przez znacznik akapitu), aby przejść poziomo do innej części obrazu. To samo dzieje się w pionie (musisz przesunąć palcem po pustym miejscu na stronie internetowej, aby zobaczyć długość obrazu w sposób mądry). Próbuję powiedzieć, że ruch przesuwając ruch wewnątrz obrazu nie ma żadnego efektu, podczas gdy użytkownicy oczekują tego po powiększeniu obrazu.

Bardzo trudno wytłumaczyć bez przykładu i próbowałem stworzyć http://jsfiddle.net/Debarupa/8peaf/, ale nie działa tak, jakbym chciał, ponieważ nie mogę edytować mety w głowie. Musiałem dodać:

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

tak, że cała strona nie jest zoomable.

Answer 1

Możesz obliczyć swoją własną skalę, monitorując gest użytkownika i śledząc punkty kontaktu palców.

Coś jak:

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 
}); 

Ale, jeśli chcesz używać coś pre-made, to proponuję sprawdzenie out Touchy: https://github.com/HotStudio/touchy