CSS极坐标的实例代码游戏攻略

admin HTML/Xhtml 2022-02-04 21:43:59 CSS 极坐标"

前言

项目有图表方面的需求，其中有做卫星定位的图形，需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标，找到示例，虽然满足了部分需求，但是极坐标是由canvs画的，卫星有自己的编号，所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标

提示：以下是本篇文章正文内容，下面案例可供参考

一、示例

上面示例，下面echarts示例

polar

二、设计步骤

1.纬度

几个div，设置圆角

2.经度

多条0.5px的边框，通过旋转实现

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进行旋转，如果需要美化，可以使点反方向旋转该角度达到编号是一个正的效果。