5

iPadで使用する小さな「pdf」ビューアーがあります。HTML での PDF のレンダリングは非常に遅いことがわかったので、PNG ソリューションを試してみました。これは Web アプリケーションであり、すべてがピクセル パーフェクトであるため、ズームは無効になっています。

私のアイデアは、実際には画像がどんなに大きくてもカプセル化する div である一種の「ウィンドウ」を作成することでした。ここまでは順調ですね。

しかし、ピンチのピンチアウトをエミュレートするために Hammer を試すことにしたところ、奇妙なことが起こりました。ピンチしたり外したりすると、ページが揺れるようで何もできません...しかし、イベントハンドラーにアラート（はい、アラート）を追加すると、期待どおりに機能します。

これはコードです：

(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 デバイスで試す必要があります...何が間違っている可能性がありますか?

バグのデモ: http://jsbin.com/ivixov/1/quiet

4

1 に答える 1

0

私のiPad 1、iOS 5.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

pinchしかし、より良いアイデアは、イベントを使用してevent.gesture.scaleパラメーターを操作することだと思います

于 2013-07-23T11:20:18.347 に答える