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 等

安装与构建

仓库开发：

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

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

`bash
pnpm add @rfkit/renderer
`

快速上手

HTML 容器：

`html


`

创建渲染器并推送数据：

`ts
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 支持）：

`ts
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[], fluorescenceMaxCount: number }。
- IQ/IQEye 接收 { IData: number[], QData: number[] }。
- Dial/Radar 使用 CircularData；Gauge 使用 { value: number; limit?: number }。

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