简介这是一套基于C与Qt5.15.2实现的雷达图与摇杆图控件源码面向需要自定义数据可视化或交互式方向控制界面的开发者尤其适合正在学习Qt绘图、事件处理与自定义控件封装的中级C程序员。项目使用VS2019配合CMake构建未引入任何第三方库编译环境干净可控方向数量可按需扩展便于直接嵌入仪表盘、游戏手柄或工业控制类界面。压缩包共10个文件包含5个cpp源文件、4个头文件及1份说明文本整体仅13KB体量轻巧核心逻辑集中在雷达绘制与摇杆交互两个模块代码附有注释便于理解绘制流程与坐标映射思路。目前已有521人学习下载。作者后续将补充一到两篇文章讲解实现细节读者可借此掌握Qt自定义控件的绘制与事件响应方法并在此基础上快速改造出符合自身需求的可视化组件。1. 雷达图与摇杆图从数据可视化到实时操控的落地路径很多做前端或数据大屏的工程师都遇到过这种需求老板指着竞品界面说“我要一个能看六个维度健康度的雷达图旁边再放一个能拖拽控制方向的摇杆”。听起来像是两个不相干的东西但实际落地时你会发现它们共享同一套坐标映射逻辑和事件响应机制。雷达图解决的是“多维数据怎么在一张图里对比”摇杆图解决的是“用户意图怎么转成连续的方向向量”。前者常用于能力评估、性能监控、游戏角色属性面板后者常见于遥控器界面、机器人操控、虚拟摇杆、无人机地面站。如果你正在做数据看板、IoT 控制台或者游戏 HUD这两个组件大概率会同时出现在你的需求清单里。本文不聊虚的直接拆解从零实现这两个图表的完整路径包括坐标系怎么建、参数怎么调、事件怎么绑以及我踩过的那些坑。2. 雷达图从数据到多边形的映射与渲染2.1 雷达图的数学本质与坐标计算雷达图的核心是把 N 个维度的数值映射到 N 个等角度间隔的射线上然后把相邻射线的端点连成多边形。假设有 6 个维度每个维度满分为 100当前值为 v_i那么第 i 个维度的角度就是i * 2π / 6 - π/2减 π/2 是为了让第一个维度朝正上方。半径 r_i (v_i / 100) * R其中 R 是图表的最大半径。最终坐标就是(cx r_i * cos(θ_i), cy r_i * sin(θ_i))cx、cy 是中心点坐标。这个计算看起来简单但实际写代码时最容易翻车的地方是角度制和弧度制的混用。JavaScript 的Math.cos接收弧度但很多设计师给的标注是角度。我一般会在代码里统一用弧度只在配置项里暴露角度给使用者内部转换一次。// 雷达图坐标计算核心函数 function calcRadarPoints(values, maxValue, radius, centerX, centerY) { const n values.length; const points []; for (let i 0; i n; i) { // 角度从正上方开始顺时针分布 const angle (Math.PI * 2 * i) / n - Math.PI / 2; // 半径按比例缩放防止除零 const r maxValue 0 ? 0 : (values[i] / maxValue) * radius; points.push({ x: centerX r * Math.cos(angle), y: centerY r * Math.sin(angle), angle: angle, value: values[i] }); } return points; }逻辑说明传入 values 数组、最大值、半径和中心点返回每个维度的坐标和角度。参数 maxValue 建议取所有维度中的最大值再上浮 10%这样图形不会顶到最外圈。radius 一般取容器短边的一半再减 40px留出标签空间。centerX、centerY 就是容器中心。如果某个维度值为 0r 为 0点会落在中心这是符合预期的。2.2 用 Canvas 绘制雷达图网格、轴线和数据多边形选 Canvas 还是 SVG如果雷达图是静态的或者更新频率低于 10fpsSVG 更省事DOM 操作直观。但如果要做实时数据刷新比如每 100ms 更新一次性能指标Canvas 的性能优势就出来了。我一般用 Canvas 做雷达图因为后面要跟摇杆图联动时统一用 Canvas 渲染更一致。绘制分三层最底层是网格同心多边形中间层是轴线从中心到各顶点的线最上层是数据多边形和顶点圆点。网格的层数一般取 4 到 5 层太多会显得乱太少看不出刻度。function drawRadar(ctx, config) { const { values, maxValue, radius, centerX, centerY, levels 5 } config; const n values.length; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 1. 绘制同心网格 ctx.strokeStyle #e0e0e0; ctx.lineWidth 1; for (let l 1; l levels; l) { const r (radius * l) / levels; ctx.beginPath(); for (let i 0; i n; i) { const angle (Math.PI * 2 * (i % n)) / n - Math.PI / 2; const x centerX r * Math.cos(angle); const y centerY r * Math.sin(angle); i 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.closePath(); ctx.stroke(); } // 2. 绘制轴线 ctx.strokeStyle #ccc; for (let i 0; i n; i) { const angle (Math.PI * 2 * i) / n - Math.PI / 2; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(centerX radius * Math.cos(angle), centerY radius * Math.sin(angle)); ctx.stroke(); } // 3. 绘制数据多边形 const points calcRadarPoints(values, maxValue, radius, centerX, centerY); ctx.beginPath(); points.forEach((p, i) { i 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y); }); ctx.closePath(); ctx.fillStyle rgba(64, 158, 255, 0.3); ctx.fill(); ctx.strokeStyle #409eff; ctx.lineWidth 2; ctx.stroke(); // 4. 绘制顶点 points.forEach(p { ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fillStyle #409eff; ctx.fill(); }); }参数说明levels 控制网格层数建议 4 到 6。fillStyle 的透明度取 0.2 到 0.4 之间太深会挡住网格太浅看不出形状。顶点圆点半径 3 到 5px 比较合适。如果维度超过 8 个标签文字需要做旋转或者省略否则会重叠。2.3 雷达图的数据更新与动画过渡实际项目里雷达图的数据往往不是静态的。比如服务器健康度面板CPU、内存、磁盘、网络、温度、负载六个指标每秒都在变。如果每次更新都直接重绘图形会跳变视觉上很不舒服。我一般会加一个简单的线性插值动画让旧值在 300ms 内平滑过渡到新值。// 简单的数值插值器 function createTween(fromValues, toValues, duration 300) { const start performance.now(); const from [...fromValues]; const to [...toValues]; function update(now) { const t Math.min((now - start) / duration, 1); // 缓动函数easeOutCubic const eased 1 - Math.pow(1 - t, 3); const current from.map((v, i) v (to[i] - v) * eased); drawRadar(ctx, { ...config, values: current }); if (t 1) requestAnimationFrame(update); } requestAnimationFrame(update); }逻辑说明fromValues 是当前显示值toValues 是新数据。缓动函数用 easeOutCubic 让动画结尾更自然。duration 一般 200 到 400ms太短看不出过渡太长会感觉迟钝。注意每次新数据到来时要取消上一次未完成的动画否则会出现多个动画同时跑导致数值震荡。我一般用一个全局的 animationId 来管理新动画开始前先 cancelAnimationFrame。提示如果数据更新频率高于动画时长比如每 100ms 更新一次但动画 300ms建议直接跳过动画否则永远在追目标值。判断逻辑是如果距离上次更新小于 duration就取消动画直接设值。3. 摇杆图方向向量采集与实时反馈3.1 摇杆的交互模型从触摸/鼠标事件到方向向量摇杆图的核心是一个圆形底座加一个可拖拽的摇杆头。用户拖拽摇杆头时需要计算出偏移方向和偏移量通常归一化为一个二维向量 (x, y)x 和 y 的范围都是 -1 到 1。这个向量就是控制指令的来源。比如 x 控制左右转向y 控制前后速度。事件处理要同时兼容鼠标和触摸。鼠标用 mousedown、mousemove、mouseup触摸用 touchstart、touchmove、touchend。我一般会抽象一个 Pointer 事件层统一处理。关键点是mousemove 和 touchmove 要绑定在 document 上而不是摇杆元素上否则鼠标移出元素后拖拽就断了这是血泪经验。class Joystick { constructor(container, options {}) { this.container container; this.radius options.radius || 80; // 底座半径 this.knobRadius options.knobRadius || 30; // 摇杆头半径 this.maxDistance this.radius - this.knobRadius; // 最大可拖拽距离 this.centerX 0; this.centerY 0; this.vector { x: 0, y: 0 }; this.active false; this.init(); } init() { // 创建底座和摇杆头 DOM this.base document.createElement(div); this.base.style.cssText position:relative;width:${this.radius*2}px;height:${this.radius*2}px;border-radius:50%;background:#f0f0f0;border:2px solid #ccc;touch-action:none;; this.knob document.createElement(div); this.knob.style.cssText position:absolute;width:${this.knobRadius*2}px;height:${this.knobRadius*2}px;border-radius:50%;background:#409eff;left:${this.radius-this.knobRadius}px;top:${this.radius-this.knobRadius}px;cursor:pointer;; this.base.appendChild(this.knob); this.container.appendChild(this.base); // 计算中心点 const rect this.base.getBoundingClientRect(); this.centerX rect.left this.radius; this.centerY rect.top this.radius; this.bindEvents(); } bindEvents() { const onStart (e) { this.active true; this.update(e); }; const onMove (e) { if (!this.active) return; e.preventDefault(); this.update(e); }; const onEnd () { this.active false; this.reset(); }; this.knob.addEventListener(mousedown, onStart); this.knob.addEventListener(touchstart, onStart, { passive: false }); document.addEventListener(mousemove, onMove); document.addEventListener(touchmove, onMove, { passive: false }); document.addEventListener(mouseup, onEnd); document.addEventListener(touchend, onEnd); } update(e) { const point e.touches ? e.touches[0] : e; let dx point.clientX - this.centerX; let dy point.clientY - this.centerY; const distance Math.sqrt(dx * dx dy * dy); // 限制在最大距离内 if (distance this.maxDistance) { dx (dx / distance) * this.maxDistance; dy (dy / distance) * this.maxDistance; } // 归一化向量 this.vector.x dx / this.maxDistance; this.vector.y dy / this.maxDistance; // 更新摇杆头位置 this.knob.style.left ${this.radius - this.knobRadius dx}px; this.knob.style.top ${this.radius - this.knobRadius dy}px; // 触发回调 if (this.onChange) this.onChange(this.vector); } reset() { this.vector.x 0; this.vector.y 0; this.knob.style.left ${this.radius - this.knobRadius}px; this.knob.style.top ${this.radius - this.knobRadius}px; if (this.onChange) this.onChange(this.vector); } }逻辑说明centerX、centerY 在初始化时计算一次但如果页面滚动或容器位置变化需要重新计算。我一般会在 window resize 时重新获取 rect。maxDistance 是底座半径减摇杆头半径这样摇杆头不会超出底座。归一化时除以 maxDistance保证向量范围在 -1 到 1。onChange 回调是给外部用的比如把向量发给机器人或者更新雷达图。3.2 摇杆的死区、灵敏度与回中策略死区是摇杆最容易被忽略但最影响体验的参数。手指轻微抖动时向量会有微小偏移如果不处理机器人会一直收到“前进 0.01”的指令电机嗡嗡响但不走。死区一般设 0.05 到 0.15 之间小于这个值直接归零。// 死区处理 const DEAD_ZONE 0.1; function applyDeadZone(vector) { const magnitude Math.sqrt(vector.x ** 2 vector.y ** 2); if (magnitude DEAD_ZONE) { return { x: 0, y: 0 }; } // 可选重新映射让死区外的值从 0 开始 const scaled (magnitude - DEAD_ZONE) / (1 - DEAD_ZONE); return { x: (vector.x / magnitude) * scaled, y: (vector.y / magnitude) * scaled }; }灵敏度曲线是另一个调参点。线性映射直接归一化适合精确控制但快速转向时手感偏硬。指数曲线比如Math.pow(magnitude, 1.5)会让小幅度移动更精细大幅度移动更激进。我一般默认用线性在设置里暴露一个灵敏度滑块给用户调。回中策略分两种松手立即归零或者松手后摇杆头弹回中心但向量保持最后值。前者适合遥控车松手就停后者适合云台控制松手后保持方向。实现上就是 onEnd 里调不调 reset 的区别。3.3 摇杆与雷达图的联动方向控制数据可视化回到标题里的场景一个雷达图加一个摇杆图。它们怎么联动一个典型场景是机器人操控面板——摇杆控制机器人移动方向雷达图实时显示机器人六个传感器的读数。摇杆的向量 (x, y) 可以映射到雷达图的某个维度上比如 x 控制“左前传感器”和“右前传感器”的差值y 控制“前向速度”维度。// 联动示例摇杆向量影响雷达图数据 const joystick new Joystick(document.getElementById(joystick-container), { radius: 80, knobRadius: 30 }); const radarData { values: [80, 60, 70, 50, 90, 40], // 六个维度初始值 maxValue: 100, radius: 120, centerX: 200, centerY: 200 }; joystick.onChange (vector) { // 把摇杆的 x 和 y 映射到雷达图的两个维度 // 维度 0前向速度由 y 控制向上为正 radarData.values[0] Math.round(50 vector.y * 50); // 维度 1转向由 x 控制 radarData.values[1] Math.round(50 vector.x * 50); // 其他维度保持不变或按需更新 drawRadar(ctx, radarData); };逻辑说明vector.y 向上为负因为屏幕坐标系 y 向下所以如果希望向上推摇杆增加前向速度需要取反。这里为了简化假设摇杆的 y 已经做了反转处理。映射公式50 vector.y * 50把 -1 到 1 映射到 0 到 100。实际项目中雷达图的维度可能更多摇杆只控制其中两个其他维度来自传感器数据。注意如果雷达图更新频率很高比如每帧都重绘而摇杆的 onChange 触发也很频繁要注意性能。我一般会用 requestAnimationFrame 做节流确保每帧最多重绘一次。4. 避坑与排查雷达图和摇杆图落地时的五个典型问题4.1 雷达图多边形自交或凹陷现象数据多边形出现交叉像蝴蝶结一样。原因维度顺序错了或者数据数组的顺序和角度计算顺序不一致。比如角度按顺时针算但数据按逆时针传。解决固定一个顺序要么全顺时针要么全逆时针在文档里写清楚。我一般用顺时针从正上方开始。4.2 摇杆在移动端拖拽时页面跟着滚动现象手指拖摇杆页面上下滚动。原因touchmove 默认行为没阻止。解决在 touchmove 里调e.preventDefault()并且给摇杆元素加touch-action: none。注意 passive 要设 false否则 preventDefault 不生效。4.3 雷达图标签文字重叠现象维度多了以后标签挤在一起看不清。原因标签位置没有根据角度调整对齐方式。解决根据角度计算 textAlign 和 textBaseline。比如角度在 -90° 到 90° 之间时 textAlign 设为 left否则设为 right。或者干脆把标签放在顶点外侧固定距离处用旋转文字。4.4 摇杆向量在边界处跳变现象摇杆拖到边缘时向量值突然从 0.9 跳到 1.0 再跳回 0.9。原因归一化时没有做距离限制或者限制逻辑有误。解决先算距离如果大于 maxDistance 就按比例缩放 dx 和 dy保证距离恰好等于 maxDistance。不要先归一化再乘 maxDistance那样会有浮点误差。4.5 雷达图数据更新时闪烁现象每次重绘雷达图图形会闪一下。原因clearRect 之后到重绘完成之间有一帧空白。解决用双缓冲先在离屏 Canvas 上画好再一次性 drawImage 到主 Canvas。或者用 CSS 的 will-change 和 transform 做合成层优化。最简单的方法是减少重绘频率用 requestAnimationFrame 节流。5. 进阶技巧用雷达图做摇杆的输入可视化与回放摇杆的输入是一串连续的方向向量如果能把这段时间的向量变化用雷达图展示出来就能做输入回放和调试。比如机器人调试时记录 10 秒内的摇杆向量然后映射到雷达图的多个维度上——维度 0 是 x 轴分量维度 1 是 y 轴分量维度 2 是速度大小维度 3 是方向角度维度 4 是 x 轴变化率维度 5 是 y 轴变化率。这样一眼就能看出操作是否平滑、有没有突变。// 摇杆输入记录与雷达图回放 class JoystickRecorder { constructor(joystick, radarConfig) { this.joystick joystick; this.radarConfig radarConfig; this.frames []; this.recording false; this.startTime 0; } start() { this.frames []; this.recording true; this.startTime performance.now(); this.joystick.onChange (vector) { if (!this.recording) return; const t performance.now() - this.startTime; this.frames.push({ t, x: vector.x, y: vector.y }); this.updateRadar(vector); }; } stop() { this.recording false; } updateRadar(vector) { const magnitude Math.sqrt(vector.x ** 2 vector.y ** 2); const angle Math.atan2(vector.y, vector.x); // -π 到 π // 映射到 6 个维度 const values [ (vector.x 1) * 50, // x 分量映射到 0-100 (vector.y 1) * 50, // y 分量映射到 0-100 magnitude * 100, // 速度大小 ((angle Math.PI) / (2 * Math.PI)) * 100, // 方向角度 50, // 占位可接变化率 50 // 占位 ]; drawRadar(ctx, { ...this.radarConfig, values }); } replay() { // 按时间戳回放 let index 0; const playFrame () { if (index this.frames.length) return; const frame this.frames[index]; this.updateRadar({ x: frame.x, y: frame.y }); index; // 按原始时间间隔回放 const nextDelay index this.frames.length ? this.frames[index].t - frame.t : 0; setTimeout(playFrame, nextDelay); }; playFrame(); } }逻辑说明start 方法开始记录每帧把摇杆向量存下来并更新雷达图。stop 停止记录。replay 按原始时间间隔回放这样能还原操作手感。雷达图的六个维度分别对应 x、y、速度、角度和两个预留位。实际使用时可以把变化率也算出来填进去这样雷达图能反映操作的平滑程度。参数调优建议记录频率不用太高跟摇杆的 onChange 一致就行一般 60fps 下每帧一次。如果数据量太大可以每 2 帧存一次。回放时的 setTimeout 精度在 4ms 左右对于调试够用了。如果要做精确回放用 requestAnimationFrame 加时间差补偿。我自己的习惯是每次调完摇杆的死区和灵敏度都会用这个回放功能跑一遍看看雷达图上的多边形是不是平滑变化。如果出现尖刺说明死区设小了或者有噪声。这个习惯帮我省了很多次现场调试的时间。希望帮到你。本文还有配套的精品资源点击获取