vue 中利用js完成等比例缩放图片和点位跟着移动

需要等比例缩放的内容 html

<div class="boxImg" ref="cont" style="position: absolute; top: 0; left: 0">
  <!-- 这里放上需要等比例缩放的内容 -->    
</div>

在vue中 methods 中写

methods: {
  updateScaleRatio(ImgObj, maxWidth, maxHeight) {
     var image = new Image();
     //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
     image.src = ImgObj.src;
     // 用于设定图片的宽度和高度
     var tempWidth;
     var tempHeight;

     if (image.width > 0 && image.height > 0) {
       //原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度
       if (image.width / image.height >= maxWidth / maxHeight) {
         if (image.width > maxWidth) {
           tempWidth = maxWidth;
           // 按原图片的比例进行缩放
           tempHeight = (image.height * maxWidth) / image.width;
         } else {
           // 按原图片的大小进行缩放
           tempWidth = image.width;
           tempHeight = image.height;
         }
       } else {
         // 原图片的高度必然 > 宽度
         if (image.height > maxHeight) {
           tempHeight = maxHeight;
           // 按原图片的比例进行缩放
           tempWidth = (image.width * maxHeight) / image.height;
         } else {
           // 按原图片的大小进行缩放
           tempWidth = image.width;
           tempHeight = image.height;
         }
       }
       // 设置页面图片的宽和高
        ImgObj.height = tempHeight;
       ImgObj.width = tempWidth;
       // 提示图片的原来大小
       ImgObj.alt = image.width + "×" + image.height;
     }
    <!-- 下面代码是等比例缩放的时候小圆点跟着移动，若不需要删除即可-->
     // 获取所有点位
     let point = this.$refs.one;
     // 循环判断点位的位置
     this.itme.forEach((itme, index) => {
       // x 除以 图片最大宽度
       let left = itme.x / 1708;
       // y 除以 图片最大的高度
       let top = itme.y / 961;
        // 小圆点的缩放比例 屏幕除以1920
       let w = maxWidth / 1920;
       // this.$refs.one.width = 18 * w;
       // 小圆点基准值乘以小圆点的缩放比
       point[index].width = 18 * w;
       // 获取每一个点位
       let pointPosition = point[index];
        // 让图片的宽度乘以比例
       pointPosition.style.left = ImgObj.width * left + "px";
       // 让图片的高度乘以比例
       pointPosition.style.top = ImgObj.height * top + "px";
     });
     <!-- 到这里结束 -->
   },
 },

在 mounted中设置一个事实监听调度函数

 mounted() {
    window.addEventListener("resize", () => {
      this.updateScaleRatio(
        this.$refs.conten,
        window.innerWidth,
        window.innerHeight
      );
    });
    this.updateScaleRatio(
      this.$refs.conten,
      window.innerWidth,
      window.innerHeight
    );
  },

 如果有很多一样的点位则可以循环渲染

在data中写入数据 需要多少就写多少

data() {
    return {
      // 需要循环渲染的点位位置数据
      itme: [
        {
          // left值
          x: 560,
          // top值 
          y: 600,
        },
        {
        // left值
        x: 560,
        // top值 
        y: 600,
         },
      ],
    };
  },

 在需要渲染的点位中加上 v-for进行循环渲染

<img
  class="Point-one"
  src="@/assets/images/monitor.state.w.png"
  ref="one"
  v-for="item in itme"
  :key="item.x"
/>