Ho un piccolo "pdf" -viewer da utilizzare nell'iPad. Da quando ho scoperto che il rendering del PDF in HTML è dolorosamente lento, ho provato ad andare con una soluzione PNG. Poiché si tratta di una webapp e tutto è pixel -perfetto, lo zoom è disabilitato.Il martello per falsificare lo zoom non funziona
La mia idea era di creare una sorta di "finestra" che è in realtà un div che incapsula un'immagine, non importa quanto sia grande. Fin qui tutto bene.
Tuttavia, ho deciso di provare Hammer per emulare il pinchout pinchout e succede qualcosa di strano. Quando pinpin o out, la pagina sembra scuotere e quindi non sei in grado di fare nient'altro ... Tuttavia, se si aggiunge un avviso sul gestore di eventi (sì, un avviso) funziona come previsto.
Questo è il codice:
(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);
e questa è una demo pulito. Dovresti provare su un dispositivo iOS ... Qualche idea su cosa può essere sbagliato?
Bug demo: http://jsbin.com/ivixov/1/quiet
Dove stai mettendo il mettere in guardia? Sembra che potresti avere un problema con due parti di codice che tentano di fare cose contrastanti allo stesso tempo, e l'avviso è attualmente il mezzo con cui stai impedendo questo. – pandavenger
@pandavenger Inserisco l'avviso all'interno dei gestori di eventi. Non ha molto senso e il codice è davvero semplice come puoi vedere. –
Dimmi se aggiungere qualcuno di questi agli eventi ti sarà d'aiuto. Potrebbe essere necessario evitare comportamenti di default dell'iPad come tale zoom. https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults – pandavenger