移动端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
      });
//缩放开始时计算缩放的原点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 + ")";
        }

      });
    },

        

          

            

              
              
              

            
          
          

            
*甲方(签署区)
签署区

            
换章
          
        
      

#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%;
    }
  }