我在iPad上使用了一些“pdf”-viewer。由于我发现用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设备上...任何可能出错的想法?
答案 0 :(得分: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
参数