real-radar

一个真实雷达调节图形化组件。🎃注意🎃：是真实雷达数据！

安装

npm i real-radar

props

参数	说明	类型	默认值	可选值
angle	扫描区域夹角	Number	80	0~360
radius	svg内雷达图形半径	Number	180	1~Infinity
rotate	雷达扫描区域法线，相对正北方向旋转的角度	Number	130	0~360
gap	svg的padding	Number	40	0～radius
height	刻度高度	Number	5	-
radiusReal	真实辐射距离（km），用来标记刻度	Number	3000	-
count	几个刻度、弧	Number	3	0～
color	图谱颜色	String	rgb(38, 222, 117)	-
speed	扫描快慢(ms)	Number	10	-
showScanBg	是否展示扇形	Boolean	false	true
scanBgColor	展示扇形底色	String	#eee	-
radarBg	svg bg color	String	transparent	-

注意

1. 标注字体12px

标注需要让文字向前移动一般距离，处在刻度中心，就需要知道字体的长度

/**
* 获取文本px宽度
* @param font{String}: normal(正常字体) 字体大小 字体名称
**/
const fontSize = '12px'
String.prototype.pxWidth = function (font = `normal ${fontSize} SiYuan`) {
  // re-use canvas object for better performance
  const canvas = String.prototype.pxWidth.canvas ||
    (String.prototype.pxWidth.canvas = document.createElement("canvas"))
  const context = canvas.getContext('2d')

  font && (context.font = font)
  const metrics = context.measureText(this)

  return metrics.width;
}

2. 图形内设置了padding，对应着props参数重gap

3. 扇形均分

配置均分最大为30度，想要均分的舒服些，这里取26～30中计算哪个分起来更舒服

scanPathCount () {
  const { angle } = this
  // angle / i(26~30), 取最小余数的i
  const items = [26, 27, 28, 29, 30]
  let b = 30 // 默认最大余数
  items.forEach(i => {
    if (angle % i < b) {
      b = i
    }
  })

  return Math.floor(angle / b)
},