vue 缩放与移动（放大缩小“简单”动画）

需要进行缩放与移动的div

<div ref="chmap" style="transform:scale(1)" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)">
  、、内容
</div>

1. 手势操作开始，手指触摸到屏幕

      // 手势操作开始
      touchstart(e) {
     
        this.pageX = e.targetTouches[0].pageX; // 获取手指点的x坐标
        this.pageY = e.targetTouches[0].pageY; // 获取手指点的Y坐标
        this.initX = this.$refs.chmap.offsetLeft; // 获取div的left
        this.initY = this.$refs.chmap.offsetTop;  // 获取div的top
        if (e.touches.length >= 2) {
      //判断是否有两个点在屏幕上
          this.start = e.touches; //得到第一组两个点
        };
        this.isTouch = true; // 开启手指操作
      },

2. 手指移动中，判断是缩放还是拖动

      // 手势操作中
      touchmove(e) {
     
        let self = this;
        let chmapScale = this.$refs.chmap.style.transform.slice(6,-1) // 获取scale值
        e.preventDefault(); // 取消事件的默认动作。
        // 移动操作
        if (e.touches.length == 1 && this.isTouch) {
     
          let touchMoveX = e.targetTouches[0].pageX  // 移动后的left值
          let touchMoveY = e.targetTouches[0].pageY; // 移动后的top值
          // 移动后的left值 - 移动前的left值 =  移动的距离
          // 移动的距离 + div左边距 = 拖放后的位置
          this.$refs.chmap.style.left = parseInt(touchMoveX) - parseInt(this.pageX) + parseInt(this.initX) + "px";
          this.$refs.chmap.style.top = parseInt(touchMoveY) - parseInt(this.pageY) + parseInt(this.initY) + "px";
        };
       
        // 放大操作 两个点以上，为了不无限放大造成负担，最大2.4倍
        if (e.touches.length == 1 && self.isTouch && chmapScale < 2.4 ) {
     
          var now = e.touches; // 获取手指点的参数
          let scale = (self.getDistance(now[0], now[1]) / self.getDistance(self.start[0], self.start[1])); // 调用算法算出偏移量
          // 最大值
          if(scale > 1.1) {
     
            this.visible = false;
            scale = 2
            // 下面是放大动画，因为不复杂，用定时简单写了
            this.isTouch = false;
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.2 + ")"; },50)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.4 + ")"; },100)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.6 + ")"; },140)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.8 + ")"; },180)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 2 + ")";   },220)
          } 
          // 最小值
          if(scale < 1) {
     
            this.visible = true;
            // 缩放后回归原位
            this.$refs.chmap.style.left = 0 + "px";
            this.$refs.chmap.style.top = '38.5vh';
            scale = 1
            // 下面是放大动画，因为不复杂，用定时简单写了
            this.isTouch = false;
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.8 + ")"; },50)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.6 + ")"; },100)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.4 + ")"; },140)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1.2 + ")"; },180)
            setTimeout(()=>{
      self.$refs.chmap.style.transform = "scale(" + 1 + ")";   },220)
          } 
        };
      },

3. 结束操作，关闭，避免误触发

      // 手势操作结束
      touchend(e) {
     
        if (this.isTouch) {
     
          this.isTouch = false;
        }
      },

4. 算法（重点）

	// 算出数值，勾股定理方法
      getDistance(p1, p2) {
     
        var x = p2.pageX - p1.pageX
        var y = p2.pageY - p1.pageY;
        return Math.sqrt((x * x) + (y * y));  
      },

注：缺点是没法从3倍到0.5倍，会默认把3倍变成1倍再缩小成0.5倍。（因个人用不到，先不细究）
参考(已赞)：https://blog.csdn.net/qq_42014697/article/details/80728463