锤子假冒变焦不起作用

Question

我有一个小的"pdf" - 观看者可以在iPad上使用.由于我发现用HTML格式化渲染PDF非常慢,所以我尝试使用PNG解决方案.由于它是一个webapp并且一切都是像素完美的,因此禁用了缩放.

我的想法是创建一种"窗口",实际上是一个封装图像的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

Answer 1

在我的 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参数