rfkit-renderer

Canvas/WebGL 渲染器集合，适用于射频和通用数据可视化。内置线谱、热力/荧光图、IQ/眼图、仪表盘、环形/雷达等组件，并提供 WebGL 版热力渲染以处理大矩阵数据。

主要能力

• Canvas 2D：Series(Line/Bar/Area/Stepline)、Heatmap、Fluorescence、Gauge、Dial、Radar、IQ、IQEye
• WebGL：HeatmapWebGL（大规模强度矩阵，颜色查表渲染）
• 工具与类型：ColorInterpolator、GraphicType、OrientationType、AxisYRange、SeriesConfig 等

安装与构建

仓库开发：

pnpm install
pnpm dev        # 实时构建
pnpm build      # 生成 dist
pnpm check      # biome 格式与检查

作为依赖使用（发布包名为 @rfkit/renderer）：

pnpm add @rfkit/renderer

快速上手

HTML 容器：

<div id="heatmap" style="width:640px;height:240px;"></div>
<div id="series" style="width:640px;height:200px;"></div>
<div id="heatmap-webgl" style="width:640px;height:240px;"></div>

创建渲染器并推送数据：

import {
  Heatmap,
  Series,
  HeatmapWebGL,
  GraphicType
} from '@rfkit/renderer';

const heatmap = new Heatmap({
  id: 'heatmap',
  range: [-120, 0],
  colors: ['#001B44', '#0041FF', '#00D1FF', '#00FFA3', '#FEE440', '#FF006E']
});

heatmap.render(
  Array.from({ length: 120 }, () =>
    Array.from({ length: 256 }, (_, i) => -110 + Math.sin(i / 16) * 30)
  )
);

const sweep = new Series({
  id: 'series',
  range: [-120, 10]
});

sweep.render({
  name: 'spectrum',
  type: GraphicType.Line,
  color: '#00FFA3',
  data: Float32Array.from({ length: 512 }, (_, i) => -90 + Math.cos(i / 18) * 15)
});

使用 WebGL 热力渲染（需要 WebGL2 支持）：

const heatmapGL = new HeatmapWebGL({
  id: 'heatmap-webgl',
  range: [-120, 0],
  colors: ['#0B1021', '#3465A4', '#5BC0EB', '#9BF6FF', '#FDE74C', '#FF206E']
});

heatmapGL.render(largeMatrix); // largeMatrix: number[][]

数据格式速览

• Series.render 接收 SeriesConfig（必填 name，data 为 Float32Array，type 由 GraphicType 指定）。
• Heatmap / HeatmapWebGL 接收 number[][]，内层数组表示一行数据。
• Fluorescence 接收 { fluorescenceData: Map<number, number>[], fluorescenceMaxCount: number }。
• IQ/IQEye 接收 { IData: number[], QData: number[] }。 IQEye 额外支持 iqEyeMode（'classic' | 'legacy' | 'modern'），默认 classic：每帧重算、绿红显影；传 modern 可启用跨帧 decay 模式。
• Dial/Radar 使用 CircularData；Gauge 使用 { value: number; limit?: number }。

常用操作：setRange(range) 调整量程并重绘；resize() 在容器尺寸变化后调用；clear() 清空画布及内部数据。