js 實現頁面局部（或圖片）放大功能(vue)

方法：

　　adjustStart1 (e) {
      e.preventDefault()
      let event = e.touches
      if (event.length === 2) {
        this.styles = 'transform: scale(2)'
      }
    },
    // 調整開始
    adjustStart (e) {
      let event = e.touches
      this.fingerA.startX = event[0].pageX
      this.fingerA.startY = event[0].pageY
      // 移動
      if (event.length === 1) {
        this.isDrag = true
        this.isScale = false
        // 縮放
      } else if (event.length === 2) {
        this.isScale = true
        this.isDrag = false
        this.fingerB.startX = event[1].pageX
        this.fingerB.startY = event[1].pageY
      }
    },
    // 調整中，移動或縮放
    adjustIng (e) {
      let event = e.touches
      this.fingerA.endX = event[0].pageX
      this.fingerA.endY = event[0].pageY
      // 移動
      if (this.isDrag) {
        // 本次移動距離要加上之前移動的距離
        this.move.x = this.fingerA.endX - this.fingerA.startX + this.move.temX
        this.move.y = this.fingerA.endY - this.fingerA.startY + this.move.temY
        this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})`
      } else if (this.isScale) {
        // 縮放
        this.fingerB.endX = event[1].pageX
        this.fingerB.endY = event[1].pageY
        // 兩手指間距離
        let distanceStart = Math.sqrt(
          Math.pow(this.fingerA.startX - this.fingerB.startX, 2) + Math.pow(this.fingerA.startY - this.fingerB.startY, 2)
        )
        let distanceEnd = Math.sqrt(
          Math.pow(this.fingerA.endX - this.fingerB.endX, 2) + Math.pow(this.fingerA.endY - this.fingerB.endY, 2)
        )
        this.move.scale = (distanceEnd / distanceStart) * this.move.temScale
        // 向量叉乘，求出旋轉方向及角度
        // 開始兩個手指的向量
        var vector1 = new this.Vector(
          this.fingerA.startX,
          this.fingerA.startY,
          this.fingerB.startX,
          this.fingerB.startY
        )
        // 結束時兩個手指的向量
        var vector2 = new this.Vector(
          this.fingerA.endX,
          this.fingerA.endY,
          this.fingerB.endX,
          this.fingerB.endY
        )
        var cos = this.calculateVM(vector1, vector2)
        var angle = (Math.acos(cos) * 180) / Math.PI
        var direction = this.calculateVC(vector1, vector2)
        this.move.allDeg = direction * angle + this.move.temDeg
        this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})`
      }
    },
    // 調整結束
    adjustEnd (e) {
      this.move.temX = this.move.x
      this.move.temY = this.move.y
      this.move.temScale = this.move.scale
      this.move.temDeg = this.move.allDeg
      this.isDrag = false
      this.isScale = false
    },
    calculateVM (vector1, vector2) {
      return (
        (vector1.x * vector2.x + vector1.y * vector2.y) /
        (Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) *
          Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y))
      )
    },
    calculateVC (vector1, vector2) {
      return vector1.x * vector2.y - vector2.x * vector1.y > 0 ? 1 : -1
    },
    Vector (x1, y1, x2, y2) {
      this.x = x2 - x1
      this.y = y2 - y1
    }

調用方法：

<div :style="styles" @touchstart.stop="adjustStart($event)" @touchmove.stop="adjustIng" @touchend.stop="adjustEnd"></div>

data 中定義變量：

　　　isScale: false,
     isDrag: false,
     styles: '',
      actived: 1,
      value1: '',
      limitHourValue: '',
      hourList: ['11', '12', '13', '14', '17', '18', '19', '20', '21'],
      // 手指A
      fingerA: {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0
      },
      // 手指B
      fingerB: {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0
      },
      // 調整數據
      move: {
        x: 0,
        y: 0,
        temX: 0,
        temY: 0,
        scale: 1,
        temScale: 1,
        allDeg: 0,
        temDeg: 0
      },
      // 默認樣式
      imgPosition: {
        left: 0,
        top: 0,
        width: 0,
        height: 0
      }