移動端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 + ")";
        }

      });
    },
           

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