用到fiex弹性布局

   效果:缩放时小黄圆点也跟着一起缩放

 

 

复制代码
 <!-- 灰色背景 -->
  <div class="boxImg"
       ref="cont"
       style="position: absolute; top: 0; left: 0">
    <!-- 综合监控首页 -->
    <img class="topImg"
         src="./images/images/monitor.title.bg.png"
         alt="">
    <div>

      <!-- 原图 -->
      <img class="contImg"
           src="./images/images/factory.plan.png"
           alt=""
           ref="conten">
      <!-- 小圆点 -->
      <img class="Point-one"
           src="./images/images/monitor.state.w.png"
           ref="one"
           v-for="item in itme"
           :key="item.x" />
    </div>
  </div>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
export default {
  data () {
    return {
      // 圆点的数量
      itme: [
        {
          // left值
          x: 560,
          // top值
          y: 600,
        },
        {
          // left值
          x: 624,
          // top值
          y: 595,
        },
        {
          // left值
          x: 692,
          // top值
          y: 595,
        },
        {
          // left值
          x: 555,
          // top值
          y: 670,
        },
        {
          // left值
          x: 618,
          // top值
          y: 680,
        },
        {
          // left值
          x: 689,
          // top值
          y: 670,
        },
      ],
    }
  },
  mounted () {
    window.addEventListener("resize", () => {
      this.updateScaleRatio(
        this.$refs.conten,
        // 屏幕显示的宽度
        window.innerWidth,
        // 屏幕显示的高度
        window.innerHeight
      );
    });
    this.updateScaleRatio(
      this.$refs.conten,
      // 屏幕显示的宽度
      window.innerWidth,
      // 屏幕显示高度
      window.innerHeight
    )
  },
  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 + "x" + 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";
      });
    },
  }
}

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 灰色背景 */
.boxImg {
  background-image: url('./images/images/map.bg.jpeg');
  width: 100%;
  height: 99.5%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.boxImg div {
  position: relative;
}
/* 小黄圆点 */
.Point-one {
  position: absolute;
  left: 630px;
  top: 670px;
}
/* 综合监控首页 */
.topImg {
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 1111;
}

  

 

posted on   李子骞  阅读(83)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示