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

vue2版本

<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,
    }
  },
  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的页面上,修改个图片地址即可,拿来即用

vue3版本

<script setup>
import { ref } from "vue";
const store = ref({
  //图片缩放
  scale: 1,
  pageX: "",
  pageY: "",
});
const contrastimg = ref(null);
const top = ref(0);
const left = ref(0);
const ot = ref(0);
const ol = ref(0);

// 开始移动
const startMap = (e, index) => {
  ol.value = e.touches[0].clientX - contrastimg.value.offsetLeft;
  ot.value = e.touches[0].clientY - contrastimg.value.offsetTop;

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

  console.log(events.pageX);
  // 第一个触摸点的坐标
  store.value.pageX = events.pageX;
  store.value.pageY = events.pageY;
  store.value.moveable = true;
  if (events2) {
    store.value.pageX2 = events2.pageX;
    store.value.pageY2 = events2.pageY;
  }
  store.value.originScale = store.value.scale || 1;
};

// 移动中
const moveMap = (e, index) => {
  let leftX = e.touches[0].clientX;
  let topY = e.touches[0].clientY;
  top.value = topY - ot.value;
  left.value = leftX - ol.value;

  console.log("leftX,topY", leftX, topY);
  console.log("top.value,left.value", top.value, left.value);

  e.preventDefault();
  var touches = e.touches;
  var events = touches[0];
  var events2 = touches[1];
  if (events2) {
    // 双指移动
    if (!store.value.pageX2) {
      store.value.pageX2 = events2.pageX;
    }
    if (!store.value.pageY2) {
      store.value.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.value.pageX,
          y: store.value.pageY,
        },
        {
          x: store.value.pageX2,
          y: store.value.pageY2,
        }
      );

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

    store.value.scale = newScale;
  }
};

// 结束移动
const endMap = (e, index) => {};
</script>

<template>
  <div class="container">
    <div class="bgcContainer">
      <div
        class="bgImgContainer"
        @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>

<style scoped lang="less">
.bgcContainer {
  width: 100vw;
  height: 100vh;
  .bgImgContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    .coach_daily_bg {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -10;
    }
  }
}
</style>