CSS极坐标的实例代码
发布时间:2021-06-03 16:57:51 作者:阿阿啊啊阿阿豪 我要评论
项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况,本文主要介绍了CSS极坐标的实例代码,分享给大家,感兴趣的可以了解一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
前言
项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标,找到示例,虽然满足了部分需求,但是极坐标是由canvs画的,卫星有自己的编号,所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标
提示:以下是本篇文章正文内容,下面案例可供参考
一、示例
上面示例,下面echarts示例
二、设计步骤
1.纬度
几个div,设置圆角
2.经度
多条0.5px的边框,通过旋转实现
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 | lines: [ { id: 1 , transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)" , borderStyle: "solid" , borderColor: "#333" , }, { id: 2 , transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)" , borderStyle: "dashed" , borderColor: "#91cc75" , }, { id: 3 , transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)" , borderStyle: "solid" , borderColor: "#333" , }, { id: 4 , transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)" , borderStyle: "dashed" , borderColor: "#91cc75" , }, ], |
3.卫星(点)
后台的数据只有经度和纬度。纬度很好做,按照90°的比例进行定位。经度用到旋转,注意不是直接在点上旋转,否则只是盒子旋转,需要在点外边套一个div进行旋转,如果需要美化,可以使点反方向旋转该角度达到编号是一个正的效果。
三、代码实现
代码是以vue的组件来写的,satellites就是极坐标的数据接口。
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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 | <template> <div class= "polar" > <div class= "polar-main" > <div class= "polar-1" > <div class= "polar-2" > <div class= "polar-3" > <p v- for = "item in latitudes" :key= "item.id" class= "latitude" :style= "{ top: item.location.top, transform: item.location.transform, }" > {{ item.value }} </p> <div class= "polar-center" > <div class= "satellites" > <div v- for = "item in satellites" :key= "item.name" > <p v- for = "ele in item.distribution" :key= "ele.id" class= "satellite-box" :style= "{ transform: rotate(ele.long), }" > <el-tooltip class= "item" effect= "dark" :content= "`经度:${ele.long} 纬度:${ele.lati}`" placement= "top-start" > <span class= "satellite" :style= "{ backgroundColor: ele.color, top: top(ele.lati), transform: rotate(-1 * ele.long), }" >{{ ele.id }}</span > </el-tooltip> </p> </div> </div> </div> </div> </div> </div> <p v- for = "item in lines" :key= "item.id" class= "line" :style= "{ transform: item.transform, borderStyle: item.borderStyle, borderColor: item.borderColor, }" ></p> <p v- for = "item in longitudes" :key= "item.id" class= "longitude" :style= "{ top: item.location.top, left: item.location.left, transform: item.location.transform, }" > {{ item.value }} </p> </div> <div class= "satellite-name" ></div> </div> </template> <script> export default { data() { return { lines: [ { id: 1, transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)" , borderStyle: "solid" , borderColor: "#333" , }, { id: 2, transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)" , borderStyle: "dashed" , borderColor: "#91cc75" , }, { id: 3, transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)" , borderStyle: "solid" , borderColor: "#333" , }, { id: 4, transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)" , borderStyle: "dashed" , borderColor: "#91cc75" , }, ], longitudes: [ { id: 5, value: "90°" , location: { top: "50%" , left: "100%" , transform: "translateY(-50%)" , }, }, { id: 6, value: "180°" , location: { top: "100%" , left: "50%" , transform: "translateX(-50%)" , }, }, { id: 7, value: "270°" , location: { top: "50%" , left: "0" , transform: "translateX(-100%) translateY(-50%)" , }, }, { id: 8, value: "360°" , location: { top: "0" , left: "50%" , transform: "translateX(-50%) translateY(-100%)" , }, }, ], latitudes: [ { id: 1, value: "90°" , location: { top: "50%" , left: "0" , transform: "translateY(-50%) translateX(50%)" , }, }, { id: 2, value: "60°" , location: { top: "0" , left: "0" , transform: "translateY(-50%) translateX(50%)" , }, }, { id: 3, value: "30°" , location: { top: "-50%" , left: "0" , transform: "translateY(-50%) translateX(50%)" , }, }, ], satellites: [ { name: "Below Mask" , distribution: [ { id: "10" , long: 46.397128, lati: 56.397128, color: "#409eff" , }, { id: "08" , long: 76.397128, lati: 32.916527, color: "#409eff" , }, ], }, { name: "Unhealthy" , distribution: [ { id: "25" , long: 156.397128, lati: 62.916527, color: "#f56c6c" , }, { id: "25" , long: 316.397128, lati: 12.916527, color: "#f56c6c" , }, ], }, { name: "Missing" , distribution: [ { id: "07" , long: 256.397128, lati: 22.916527, color: "#118452" , }, { id: "18" , long: 56.397128, lati: 27.916527, color: "#118452" , }, { id: "12" , long: 66.397128, lati: 27.916527, color: "#118452" , }, { id: "16" , long: 196.397128, lati: 67.916527, color: "#118452" , }, ], }, ], }; }, methods: { top(lati) { return ((90 - lati) / 90) * -90 - 10 + "px" ; }, rotate(long) { let z = (long / 360) * 360; return `rotateZ(${z}deg)`; }, }, // filters: {}, }; </script> <style scoped lang= 'scss' > $polarPiameter: 180px; .polar-main { width: $polarPiameter; height: $polarPiameter; position: relative; p { margin: 0; } .polar-1 { width: $polarPiameter; height: $polarPiameter; border-style: solid; .polar-2 { width: $polarPiameter * 2/3; height: $polarPiameter * 2/3; border-style: dashed; .polar-3 { width: $polarPiameter/3; height: $polarPiameter/3; border-style: dashed; .polar-center { width: 1px; height: 1px; background-color: #333; } } } } .line { height: $polarPiameter; border-right-color: #333; border-right-width: 1px; border-right-style: solid; position: absolute; left: 50%; cursor: pointer; } .longitude, .latitude { height: 14px; line-height: 14px; font-size: 12px; color: #868585; position: absolute; cursor: pointer; } } .polar-1, .polar-2, .polar-3, .polar-center { border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-color: #91cc75; border-width: 1px; box-sizing: border-box; cursor: pointer; } .polar-1:hover { border-width: 2px; } .polar-2:hover{ border-width: 2px; } .satellite-box { position: absolute; width: 1px; height: 1px; border-radius: 50%; background-color: transparent; .satellite { position: absolute; left: -10px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 14px; color: #fff; cursor: pointer; z-index: 999; opacity: 0.6; transition: 0.6s; } .satellite:hover { background-color: #333 !important; } } </style> |
总结
示例图:
到此这篇关于CSS极坐标的实例代码的文章就介绍到这了,更多相关CSS极坐标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 在 Web 开发中,文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧,我们可以创造出许多独特的效果,例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
- 在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25
- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域(textarea)的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
- 本文详细介绍了如何利用HTML和CSS实现多种风格的进度条,包括基础的水平进度条、环形进度条以及球形进度条等,还探讨了如何通过动画增强视觉效果,内容涵盖了使用HTML原生标签2024-09-19
- Canvas 提供了一套强大的 2D 绘图 API,适用于各种图形绘制、图像处理和动画制作,可以帮助你创建复杂且高效的网页图形应用,这篇文章主要介绍了HTML中Canvas关键知识点总结2024-06-03
- 本文主要介绍了html table+css实现可编辑表格的示例代码,主要使用HTML5的contenteditable属性,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习2024-03-06
- 本文主要介绍了HTML中使用Flex布局实现双行夹批效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2024-02-22
- 在网站开发中,登录页面是必不可少的一部分,本文就来介绍一下HTML+CSS实现登录切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需2024-02-02
- 本文主要介绍了HTML+CSS实现全景轮播的示例代码,实现了一个简单的网页布局,其中包含了五个不同的盒子,每个盒子都有一个不同的背景图片,并且它们之间有一些间距,下面就2024-02-02
- 来到圣诞节了,那么就可以制作一颗HTML的圣诞树送给朋友,没有编程基础的小白也可以按照步骤操作也可以运行起来代码的,喜欢的朋友快来体验吧2023-12-26
最新评论