移动端VUE对于PDF图片手势缩放和移动（结合hammer.js）

最后的效果是这样的 ，关于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});
//缩放开始时计算缩放的原点transformOriginhammer.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~1hammer.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%;}}