5

我有一个小“pdf”查看器可以在 iPad 上使用。由于我发现在 HTML 中呈现 PDF 非常缓慢，因此我尝试使用 PNG 解决方案。由于它是一个 web 应用程序并且一切都是像素完美的，因此禁用了缩放。

我的想法是创建一种“窗口”，它实际上是一个封装图像的 div，无论它有多大。到目前为止，一切都很好。

但是，我决定尝试使用 Hammer 来模拟 pinchin pinchout 并且发生了一些奇怪的事情。当您捏合或拉出时，页面似乎会摇晃，然后您就无能为力了……但是，如果您在事件处理程序上添加警报（是的，警报），它会按预期工作。

这是代码：

(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

On my ipad 1, iOS 5.1 it works as expected. My guess is pinch events are too sensitive and called many-many times per pinch-move, but alert preventing them to happen cuz it pauses a code execution after first pinch event fires. I suggest you to modify pinchin event like this:

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

And try to decrease intervalZoom

But I think the better idea is to use pinch event and work with event.gesture.scale parameter

于 2013-07-23T11:20:18.347 回答