2013-07-14 12 views
5

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

+0

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

+0

@pandavenger Inserisco l'avviso all'interno dei gestori di eventi. Non ha molto senso e il codice è davvero semplice come puoi vedere. –

+0

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

risposta

0

sul mio iPad 1, iOS 5.1 funziona come previsto. La mia ipotesi è che gli eventi di pizzico sono troppo sensibili e chiamati molte-molte volte per mossa-pizzico, ma l'allarme che impedisce loro di accadere perché mette in pausa l'esecuzione di un codice dopo il primo evento di pizzicamento. Vi suggerisco di modificare pinchin evento come questo:

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

e cercare di diminuire intervalZoom

Ma credo che l'idea migliore è quella di utilizzare pinch evento e lavorare con event.gesture.scale parametro

Problemi correlati