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
      }

转载:https://www.cnblogs.com/candy-Yao/p/9945357.html