最后的效果是这样的 ，关于PDF文件显示就交给后端了，因为这个项目需要显示电子章和后端生成的文字所以直接后端生成图片更省事。
首先第一个坑
直接引入hammer.js手势没触发
要用npm安装"vue2-hammer": "^2.1.2"
关于手势启用的方法 一定要放在mounted里而且PDF图片要已经返回，这里主要监听pan(移动)和pinch（缩放）
// 启动缩放功能
setPinch() {
let that = this;
let oldScale = 1;
let oBox = document.querySelector("#inHtml");//获取到需要缩放的元素
let hammer = new Hammer(oBox);
//设置移动的方向
hammer.get("pan").set({
direction: Hammer.DIRECTION_ALL
});
//移动开始时 先计算限制的范围
hammer.on("panstart", function(event) {
clearTimeout(that.timerOut);
that.showFixed = true;
let minX = that.$refs.pdfBox.offsetWidth * that.nowScale * that.OriginX - that.$refs.pdfBox.offsetWidth * that.OriginX;
let maxX = that.$refs.pdfBox.offsetWidth * that.nowScale - minX - that.$refs.pdfBox.offsetWidth;
let minY = that.$refs.pdfBox.offsetHeight * that.nowScale * that.OriginY - that.$refs.pdfBox.offsetHeight * that.OriginY;
let maxY = that.$refs.pdfBox.offsetHeight * that.nowScale - minY - ((that.$refs.pdfBox.offsetHeight / that.page_count) - 50);
that.minY = minY;
that.maxY = maxY;
oBox.style.transitionDuration = "0s";
hammer.on("panmove", function(event) {
let x = 0;
let y = 0;
if (parseFloat(that.lastdeltaX + event.deltaX) > minX) {
x = minX;
} else if (parseFloat(that.lastdeltaX + event.deltaX) < -maxX) {
x = -maxX;
} else {
x = parseFloat(that.lastdeltaX + event.deltaX);
}
if (parseFloat(that.lastdeltaY + event.deltaY) > minY) {
y = minY;
} else if (parseFloat(that.lastdeltaY + event.deltaY) < -maxY) {
y = -maxY;
} else {
y = parseFloat(that.lastdeltaY + event.deltaY);
}
//用transform 来进行元素的偏移
oBox.style.transform = "translate(" + x + "px," + y + "px)" + "scale(" + that.nowScale + ")";
});
});
//移动结束后 计算velocityY手指滑动的速度 时间是500ms移动到最后的位置
hammer.on("panend", function(event) {
that.timerOut = setTimeout(() => {
if (that.showFixed) {
that.showFixed = false;
}
}, 3000);
let y = 0;
let x = 0;
let minX = that.$refs.pdfBox.offsetWidth * that.nowScale * that.OriginX - that.$refs.pdfBox.offsetWidth * that.OriginX;
let maxX = that.$refs.pdfBox.offsetWidth * that.nowScale - minX - that.$refs.pdfBox.offsetWidth;
let minY = that.$refs.pdfBox.offsetHeight * that.nowScale * that.OriginY - that.$refs.pdfBox.offsetHeight * that.OriginY;
let maxY = that.$refs.pdfBox.offsetHeight * that.nowScale - minY - ((that.$refs.pdfBox.offsetHeight / that.page_count) - 50);
that.minY = minY;
that.maxY = maxY;
that.lastdeltaX = parseFloat(that.lastdeltaX + event.deltaX);
that.lastdeltaY = parseFloat(that.lastdeltaY + event.deltaY);
let distance = event.velocityY * 500;
oBox.style.transitionDuration = "500ms";
if (that.lastdeltaX > minX) {
x = minX;
} else if (that.lastdeltaX < -maxX) {
x = -maxX;
} else {
x = that.lastdeltaX;
}
if (that.lastdeltaY + distance > minY) {
y = minY;
} else if (that.lastdeltaY + distance < -maxY) {
y = -maxY;
} else {
y = that.lastdeltaY + distance;
}
oBox.style.transform = "translate(" + x + "px," + y + "px)" + "scale(" + that.nowScale + ")";
that.lastdeltaY = y;
that.lastdeltaX = x;
});
//开启缩放
hammer.get("pinch").set({
enable: true
});
//缩放开始时计算缩放的原点transformOrigin
hammer.on("pinchstart", function(event) {
oldScale = that.nowScale || 1;
oBox.style.transitionDuration = "200ms";
oBox.style.transitionTimingFunction = "cubic-bezier(0.23, 1, 0.32, 1)";
that.OriginX = Math.abs(event.center.x - that.lastdeltaX) / (that.$refs.pdfBox.offsetWidth);
that.OriginY = Math.abs(event.center.y - that.lastdeltaY) / (that.$refs.pdfBox.offsetHeight);
oBox.style.transformOrigin = Math.abs(event.center.x - that.lastdeltaX) / (that.$refs.pdfBox.offsetWidth) * 100 + "%" + " "
+ Math.abs(event.center.y - that.lastdeltaY) / (that.$refs.pdfBox.offsetHeight) * 100 + "%";
//限制缩放范围是2.5~1
hammer.on("pinchmove", function(event) {
if (2.5 > oldScale * event.scale && oldScale * event.scale > 0.9) {
that.nowScale = oldScale * event.scale;
oBox.style.transform = "translate(" + parseFloat(that.lastdeltaX) + "px," + parseFloat(that.lastdeltaY) + "px)" + "scale(" + oldScale * event.scale + ")";
}
});
});
hammer.on("pinchend", function(event) {
oBox.style.transitionDuration = "0s";
if (oldScale * event.scale < 1) {
that.nowScale = 1;
oBox.style.transform = "translate(" + parseFloat(that.lastdeltaX) + "px," + parseFloat(that.lastdeltaY) + "px)" + "scale(" + 1 + ")";
}
if (oldScale * event.scale > 2) {
that.nowScale = 2;
oBox.style.transform = "translate(" + parseFloat(that.lastdeltaX) + "px," + parseFloat(that.lastdeltaY) + "px)" + "scale(" + 2 + ")";
}
});
},<div id="inHtml" ref="pdfBox" v-if="!signSuccess && !signWait">
<div class="pdf-container">
<div class="pdf-box">
<div class="pdfPage_1yRne" v-for="page in contract_doc_imgs" :key="page.page">
<img :src="page.imgData" class="pdf-item" :id="'the-canvas'+page.page" alt="">
<!--<canvas class="pdf-item" :id="'the-canvas'+page"></canvas>-->
<div @click="clearAll" class="dragLayer_3ccsq" :id="'can'+ page.page"></div>
</div>
</div>
<div class="componentSign">
<p class="sealCompInfo_3v9iQ"><span class="need">*</span><span><span>甲方</span><em>(<span>签署区</span>)</em></span></p><div class="itemConentStyle_2MWEL"><div class="infoMsg_3NkPg">签署区</div><i class="iconfont icon-pm_auction_success"></i></div>
<div class="bubble top"><div id="field-change" class="bubble-item">换章</div></div>
</div>
</div>
</div>#inHtml {
position: absolute;
left: 0;
width: 100%;
/*border: 1px solid red;*/
.arrow {
padding-top: 1rem;
display: flex;
}
p {
flex: 1;
}
.link {
flex: 1;
}
.pdfPage_1yRne {
position: relative;
}
.dragLayer_3ccsq {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.pdf-item {
width: 100%;
}
}