vue2移动端网页图片触摸滑动改变top和left以及双指对图片进行缩放

代码(这个是vue2中的代码,可以稍加转换vue3也可以用)

<template>
  <div class="coach_daily">
    <div class="coach_daily-inline">
      <div style="width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 10;"
        @touchstart="startMap($event, 1)" @touchmove="moveMap($event, 1)" @touchend="endMap($event, 1)">
        <img class="coach_daily_bg" ref="contrastimg" :src="require('@/assets/image/bgc-00.png')"
          :style="{ transform: 'scale(' + store.scale + ')', top: top + 'px', left: left + 'px' }" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      store: { //图片缩放
        scale: 1,
        pageX: '',
        pageY: '',

      },
      top: 0,
      left: 0,
      ot: 0,
      ol: 0,
      leaderboardphb: true
    }
  },
  methods: {
    // 图片的移动
    //开始触摸
    startMap (e, index) {
      console.log('e', e)

      this.ol = e.touches[0].clientX - this.$refs.contrastimg.offsetLeft
      this.ot = e.touches[0].clientY - this.$refs.contrastimg.offsetTop

      var touches = e.touches
      var events = touches[0]
      var events2 = touches[1]
      if (!events) {
        return
      }
      event.preventDefault()

      console.log(events.pageX)
      // 第一个触摸点的坐标
      this.store.pageX = events.pageX
      this.store.pageY = events.pageY
      this.store.moveable = true
      if (events2) {
        this.store.pageX2 = events2.pageX
        this.store.pageY2 = events2.pageY
      }
      this.store.originScale = this.store.scale || 1
    },
    //移动中
    moveMap (e, index) {
      let left = e.touches[0].clientX
      let top = e.touches[0].clientY
      this.top = top - this.ot
      this.left = left - this.ol


      e.preventDefault()
      let store = this.store
      var touches = e.touches
      var events = touches[0]
      var events2 = touches[1]
      if (events2) {
        // 双指移动
        if (!store.pageX2) {
          store.pageX2 = events2.pageX
        }
        if (!store.pageY2) {
          store.pageY2 = events2.pageY
        }

        // 获取坐标之间的举例
        var getDistance = function (start, stop) {
          return Math.hypot(stop.x - start.x, stop.y - start.y)
        }

        var zoom = getDistance({
          x: events.pageX,
          y: events.pageY
        }, {
          x: events2.pageX,
          y: events2.pageY
        }) /
          getDistance({
            x: store.pageX,
            y: store.pageY
          }, {
            x: store.pageX2,
            y: store.pageY2
          })

        var newScale = store.originScale * zoom
        // 最大缩放比例限制
        if (newScale > 3) {
          newScale = 3
        }
        // 记住使用的缩放值

        this.store.scale = newScale

      }

    },
    //结束
    endMap () {

    },
  }
}
</script>

<style scoped lang="less">
.coach_daily {
  width: 100vw;
  height: 100vh;
  // height: auto;
  position: relative;
  overflow: hidden;
}

.coach_daily_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
}

.coach_daily-inline {
  width: 7.5rem;
  height: 10rem;
}
</style>

效果图(移动,手指怎么滑这里就怎么移动)

双指缩放(缩小)

双指缩放(放大)

上面代码直接复制粘贴到一个vue2的页面上,修改个图片地址即可,拿来即用