Młotek do fałszywego zoomu nie działa

Question

Mam małą przeglądarkę "pdf", którą można wykorzystać na iPadzie. Ponieważ okazało się, że renderowanie PDF w HTML jest boleśnie powolne, próbowałem przejść z rozwiązaniem PNG. Ponieważ jest to aplikacja internetowa i wszystko jest w pikselach, zoom jest wyłączony.

Mój pomysł polegał na stworzeniu pewnego rodzaju "okna", które w rzeczywistości jest elementem div, który otacza obraz, bez względu na to, jak duży jest. Jak na razie dobrze.

Postanowiłem jednak wypróbować Hammera, aby naśladować szczyptę pinchinów i wydarzyło się coś dziwnego. Kiedy szczypiesz lub wychodzisz, strona zdaje się trzęsać, a potem nie jesteś w stanie zrobić nic innego ... Jednak jeśli dodasz alert do programu obsługi zdarzeń (tak, alert), działa on zgodnie z oczekiwaniami.

Jest to kod:

(function($){ 
    var pdfViewer = { 
    pdf: {}, 
    currentPage : 1, 
    currentZoom : 200, 
    defaultZoom : 200, 
    intervalZoom : 30, 
    el : { 
     pdfWindow : $('.pdf-window'), 
     image : $('.pdf-window').find('img') 
    }, 
    init : function(){ 
     this.bindEvents(); 
    }, 
    bindEvents : function(){ 
     var self = this; 
     this.el.pdfWindow.hammer().on('pinchin',function(e){ 
     self.currentZoom = self.currentZoom - self.intervalZoom; 
     self.updateZoom.apply(self); 
     }); 
     this.el.pdfWindow.hammer().on('pinchout',function(e){ 
     self.currentZoom = self.currentZoom + self.intervalZoom; 
     self.updateZoom.apply(self); 
     }); 
    }, 
    updateZoom : function(){ 
     this.el.image.attr('width',this.currentZoom + '%'); 
    } 
    }; 

    pdfViewer.init(); 
})(jQuery); 

I to jest czysty demo. Powinieneś spróbować na urządzeniu z iOS ... Jakieś pomysły na to, co może być nie tak?

Bug demo: http://jsbin.com/ivixov/1/quiet

Answer 1

Na moim iPad 1, iOS 5.1 to działa zgodnie z oczekiwaniami. Domyślam się, że zdarzenia szczypania są zbyt czułe i są wywoływane wiele razy po jednym przesuwaniu, ale ostrzegają przed ich wystąpieniem, ponieważ wstrzymują wykonywanie kodu po uruchomieniu pierwszego zdarzenia uszczypnięcia. Proponuję, aby zmodyfikować pinchin wydarzenie tak:

this.el.pdfWindow.hammer().on('pinchin',function(e){ 
    self.currentZoom = self.currentZoom - self.intervalZoom; 
    if(self.currentZoom < 0) self.currentZoom = 0; 
    self.updateZoom.apply(self); 
}); 

I spróbuj zmniejszyć intervalZoom

Ale myślę, że lepszym pomysłem jest użycie pinch zdarzenie i pracować z event.gesture.scale parametru