pinchstart,pinchmove和pinchend使用
initHammer() {
// PDF伸缩事件绑定的入口
const vm = this;
const instHammer = new Hammer($(document).eq(0).get(0))
instHammer.get('pinch').set({ enable: true });
instHammer.on('pinchstart', function (ev) {
if (ev.pointers.length != 2) {
return;
}
//处理移动
var left = $("#pdfContainter").position().left;
var top = $("#pdfContainter").position().top;
vm.moveStartPosition = { 'left': left, 'top': top, 'x': ev.center.x, 'y': ev.center.y };
//处理缩放
let point1 = ev.pointers[0];
let point2 = ev.pointers[1];
let xLent = Math.abs(point2.pageX - point1.pageX);
let yLent = Math.abs(point2.pageY - point1.pageY);
vm.touchDistance = vm._getDistance(xLent, yLent);
vm.scaleCenter = ev.center;
let mydiv = document.getElementById('pdfContainter')
var rect = mydiv.getBoundingClientRect();
vm.scaleCenter.x = vm.scaleCenter.x - rect.left;
vm.scaleCenter.y = vm.scaleCenter.y - rect.top;
vm.scaletext = ev.center.x + " " + ev.center.y;
});
instHammer.on('pinchmove', function (ev) {
// ev.preventDefault();
if (ev.pointers.length != 2)
return
//处理移动
let left = vm.moveStartPosition.left + (ev.center.x - vm.moveStartPosition.x);
let top = vm.moveStartPosition.top + (ev.center.y - vm.moveStartPosition.y);
$("#pdfContainter").css({ 'left': left + "px", 'top': top + 'px' });
//处理缩放
let point1 = ev.pointers[0];
var point2 = ev.pointers[1];
let xLent = Math.abs(point2.pageX - point1.pageX);
let yLent = Math.abs(point2.pageY - point1.pageY);
let touchDistanceX = vm._getDistance(xLent, yLent);
if (vm.touchDistance) {
let pinchScale = touchDistanceX / vm.touchDistance;
//vm.scaletext = vm.scaleCenter.x + " " + vm.scaleCenter.y;
$('#pdfContainter').css({
'transform': `scale(${pinchScale},${pinchScale})`,
'transform-origin': `${vm.scaleCenter.x}px ${vm.scaleCenter.y}px`
})
vm.scale = pinchScale;
}
});
//pinchend panend
instHammer.on('pinchend', function (ev) {
// ev.preventDefault();
let mydiv = document.getElementById('pdfContainter')
var rect = mydiv.getBoundingClientRect();
let parentdiv = document.getElementById('cpdf')
var parentRect = parentdiv.getBoundingClientRect();
$("#pdfContainter").css({
'width': rect.width + 'px',
'height': rect.height + 'px',
'left': rect.left - parentRect.left + 'px',
'top': rect.top - parentRect.top + 'px',
});
$('#pdfContainter').css({
'transform': `scale(1,1)`,
'transformOrigin': '0 0'
})
const $canvasBg = $('.canvasBg');
if ($canvasBg.length > 0) {
$canvasBg.remove()
}
vm.renderPage(vm.scale)
return
});
}