Hammer zum Fälschen zoom funktioniert nicht

Ich habe ein kleines "pdf" -Viewer für das iPad. Da ich festgestellt habe, dass das Rendern von PDF in HTML schmerzhaft langsam ist, habe ich versucht, eine PNG-Lösung zu verwenden. Da es sich um eine Webanwendung handelt und alles Pixel perfekt ist, ist der Zoom deaktiviert.Hammer zum Fälschen zoom funktioniert nicht

Meine Idee war es, eine Art "Fenster" zu erstellen, bei dem es sich um ein div handelt, das ein Bild einkapselt, egal wie groß es ist. So weit, ist es gut.

Allerdings habe ich beschlossen, Hammer zu versuchen, die Pinchin-Ausschneidung nachzuahmen und etwas Seltsames passiert. Wenn Sie pinchin oder out, scheint die Seite zu schütteln und dann können Sie nichts anderes mehr tun ... Wenn Sie jedoch einen Alarm für den Event-Handler hinzufügen (ja, eine Warnung), funktioniert es wie erwartet.

Dies ist der Code:

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

Und das ist eine saubere Demo. Du solltest es in einem iOS-Gerät versuchen ... Irgendwelche Ideen, was falsch sein kann?

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

Quelle

2013-07-14 Antonio Laguna

Wo zu verwenden ist platzieren Sie die aufmerksam? Es scheint, als ob Sie ein Problem mit zwei Codeabschnitten haben könnten, die versuchen, gleichzeitig widersprüchliche Dinge zu tun, und die Warnung ist derzeit das Mittel, mit dem Sie dies verhindern. – pandavenger

@pandavenger Ich platziere den Alarm in den Event-Handlern. Ist nicht wirklich sinnvoll und der Code ist wirklich einfach, wie Sie sehen können. –

Sagen Sie mir, ob das Hinzufügen dieser Ereignisse zu den Ereignissen hilft. Möglicherweise müssen Sie das Standardverhalten des iPad, z. B. das Zoomen, selbst verhindern. https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults – pandavenger

auf meinem iPad 1, iOS 5.1 es wie erwartet funktioniert. Meine Vermutung ist, dass Pinch-Ereignisse zu sensitiv sind und viele Male pro Pinch-Move aufgerufen werden, aber Alert verhindert, dass sie passieren, weil es eine Code-Ausführung unterbricht, nachdem das erste Pinch-Ereignis ausgelöst wurde. Ich schlage vor, Sie pinchin Veranstaltung wie diese zu ändern:

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

Und versuchen intervalZoom

zu verringern Aber ich denke, die bessere Idee pinch Ereignis und die Arbeit mit event.gesture.scale Parameter

Quelle

2013-07-23 11:20:18 artygus

Hammer zum Fälschen zoom funktioniert nicht

Antwort

Verwandte Themen