ハンマーで偽のズームが動作しない

Question

私はiPadで使用する少しの "pdf"ビューアを持っています。私はHTMLでPDFをレンダリングするのが非常に遅いことを発見して以来、私はPNGソリューションを使用しようとしました。 Webアプリケーションで、すべてがピクセル完全であるため、ズームは無効です。

私のアイデアは、どれほど大きくてもイメージをカプセル化する実際にはdivである「ウィンドウ」の種類を作成することでした。ここまでは順調ですね。

しかし、私はピンチピンチをエミュレートするためにハンマーを試してみることにしました。ピンチインやアウトするとページが揺れるように見えますが、何もできません...しかし、イベントハンドラ（アラート）にアラートを追加すると、期待通りに機能します。

これはコードです：

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

そして、これはきれいデモです。あなたはiOSデバイスで試してみてください...間違っている可能性のあるアイデアはありますか？

バグデモ：私のiPad 1、iOSの5.1にhttp://jsbin.com/ivixov/1/quiet

Answer 1

期待どおりに動作します。私の推測ではピンチイベントはあまりにも敏感でピンチ移動ごとに何度も何回も呼び出されますが、最初のピンチイベントが発生した後でコード実行を一時停止するよう警告します。私はあなたがこのようなpinchinイベント変更することをお勧め：

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

をそしてintervalZoom

を小さくしようとする。しかし、私は良いアイデアがevent.gesture.scaleパラメータであなたが置いている