需要等比例缩放的内容 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;// 小圆点的缩放比例 屏幕除以1920let 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进行循环渲染
<imgclass="Point-one"src="@/assets/images/monitor.state.w.png"ref="one"v-for="item in itme":key="item.x"
/>