錘子假縮放不起作用

我有一個小的「pdf」 - 在iPad中使用的瀏覽器。由於我發現在HTML中渲染PDF的速度非常緩慢，我嘗試使用PNG解決方案。由於它是一個web應用程序，並且所有內容都是像素完美的，因此縮放功能被禁用。錘子假縮放不起作用

我的想法是創建一個排序「窗口」這實際上是一個封裝的圖像，無論它是多麼大的一個div的。到現在爲止還挺好。

不過，我決定嘗試錘效仿pinchin尖滅和奇怪的事情發生了。當你捏或跳出來，頁面似乎動搖，然後你不能做其他事情......但是，如果你在事件處理程序（是，一個警報）上添加一個警報，它會按預期工作。

這是代碼：

(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

來源

2013-07-14 Antonio Laguna

你在哪裏放置警報？這聽起來像你可能有兩個代碼試圖同時做衝突的事情，並且警報是目前你阻止這種方式的問題。 – pandavenger

@pandavenger我將警報放置在事件處理程序中。沒有什麼意義，代碼真的很簡單，正如你所看到的。 –

告訴我，如果將這些添加到事件中會有所幫助。您可能需要防止iPad默認行爲，例如自行縮放。 https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults – pandavenger

在我的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-23 11:20:18 artygus

錘子假縮放不起作用

回答

相關問題