vue3实现根据x,y坐标数据，绘图

最新推荐文章于 2024-05-14 12:24:51 发布

gao2015666

最新推荐文章于 2024-05-14 12:24:51 发布

阅读量692

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/gao2015666/article/details/134266444

版权

<div class="back">
     <img src="back.png" class="backImg"/>
     <div class="backposide">    
         <i 
             v-for="(item,index) in sunCoronalholeArr" 
             :key="index"  
             class="sunspot2"
             :style="{'top':item.y +'px',left:item.x +'px'}"
              ></i>
     </div>
</div>

<script lang="ts" setup>
 const   sunCoronalholeArr = ref([])
   const getQuery = ()=>{
      //获取到X坐标和Y坐标的数据
       getQuery().then(res=>{
            //获取要绘制区域的大小
            let mapWidth = document.getElementsByClassName('back')[0].offsetWidth;
            let mapHeight = document.getElementsByClassName('back')[0].offsetHeight;
            let add: any = []
             //这个注意，因为原始x,y的底图大小和前端可视区域的大小，肯定不一样，所以，我们要根据
            // 前端的大小和底图的大小，进行计算
            //  这里的1000是底图的大小
            // 这样计算，就能拿到可以适合前端大小的X，Y坐标了
            res.data.result.list.forEach((el, index) => {
             add.push({ 'x': (el.x * mapWidth) / 1000, 'y': (el.y * mapHeight) / 1000})
            })
       })
   }

</script>
<style>
.back{
  position: relative;
  width:100px;
  height:100px;
}
.backImg{
   width:100px;
  height:100px;
}

.backposide{
   position: absolute;
   width:100px;
   height:100px;
   top:0;
   left:0;
   z-index:11;
}
i{
        position: absolute;
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: #0e0b0b;
}
</style>