标签QtQGraphicsView工业组态SCADASVGC一、业务背景在电力 SCADA、工业组态项目中拓扑管道需要展示介质流动效果。项目需要两种动态展示形态复用同一套拓扑业务数据客户端程序内基于QGraphicsView做 GUI 交互实现管道流动、设备告警闪烁效果支持图元拖拽、编辑、属性选中配置。导出文件输出动态 SVG 矢量文件脱离 Qt 程序环境普通浏览器直接打开即可播放管道流动动画用于网页展示、报表嵌入、第三方系统预览。screen_record二、整体架构思路核心业务模型与渲染逻辑分离底层维护统一的拓扑业务模型存储管道路径、流向、流速、线条颜色、设备点位等原始数据。两套渲染分支消费同一套模型数据渲染分支 A【Qt 客户端】模型数据映射为自定义FlowPipeItem在QGraphicsView场景绘制通过全局定时器驱动实现界面流动动画支持交互编辑。渲染分支 B【导出动态 SVG】读取完全相同的一套模型数据手动拼装 SVG XML 文档嵌入 SMILanimate动画标签输出.svg文件浏览器直接播放动画。⚠️重要踩坑前置Qt 自带QSvgGenerator调用scene-render()只能输出静态画面快照不会自动生成 animate 动画标签无法直接输出动态 SVG动态效果需要手动构造 SVG 文档。三、方案 AQGraphicsView 客户端动态渲染自定义管道图元FlowPipeItem继承QGraphicsPathItem。✅工程最佳实践使用全局唯一 QTimer驱动全部管线动画禁止每一个 Item 单独创建定时器大量管道同时动画时避免 CPU 占用暴涨。// FlowPipeItem.h #include QGraphicsPathItem class FlowPipeItem : public QGraphicsPathItem { public: explicit FlowPipeItem(QGraphicsItem *parent nullptr); void setFlowPen(const QPen pen); QPen getFlowPen(); protected: void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override; private: QPen m_flowPen; };// 全局定时器统一驱动所有管道流动动画 void MainScene::onGlobalAnimTick() { m_flowStep 1.0; for(auto* pipeItem : m_pipeItems) { QPen pen pipeItem-getFlowPen(); pen.setDashOffset(m_flowStep); // 修改虚线偏移模拟介质流动 pipeItem-setFlowPen(pen); pipeItem-update(); } }方案 A 特点✅优点支持拖拽、选中、编辑修改图元完美兼容 Windows、麒麟信安、凝思等多操作系统与 X86/ARM 架构。❌缺点必须运行 Qt 客户端程序才能看到动画效果。四、方案 B导出动态 SVG浏览器直接播放动画复用上面同一套管道业务模型将 Qt 的QPainterPath转换为 SVG 路径d字符串手动拼接 SVG 标签增加 SMILanimate实现虚线流动。输出 SVG 示例片段预览查看代码svg xmlnshttp://www.w3.org/2000/svg width800 height600 viewBox0 0 800 600 !-- 管道pathdasharray定义虚线长短 -- path dM100 200 L400 200 stroke#0066ff stroke-width4 stroke-dasharray12 8 !-- SMIL动画修改stroke‑dashoffset实现无限循环流动 -- animate attributeNamestroke-dashoffset from0 to20 dur1s repeatCountindefinite/ /path /svgC 导出逻辑简述遍历内存中的管道拓扑模型集合将 QtQPainterPath转换为 SVG 标准 path 的d指令字符串处理直线、贝塞尔曲线填充stroke、stroke‑width、stroke‑dasharray等属性追加animate动画节点配置动画周期、无限循环拼接完整 SVG 文档头、viewBox把完整 XML 文本写入本地.svg文件。方案 B 特点✅优点不依赖 Qt 程序Chrome、Edge 浏览器打开直接播放流动动画矢量图片不失真方便嵌入网页、报告。❌缺点仅做预览展示不支持图元交互编辑老旧浏览器对 SMIL 动画兼容性有限。五、两种实现方案对比表格方案实现方式动画运行环境是否支持交互编辑QGraphicsView 客户端动画自定义 Item Qt 全局定时器运行 Qt 客户端程序✅支持拖拽、选中、编辑拓扑导出动态 SVG 文件手动拼装 SVG SMIL animate 标签浏览器直接打开❌仅预览和修改状态两套方案使用同一套业务数据源不需要维护两份拓扑数据降低重复开发与 BUG 风险。六、开发踩坑总结QSvgGenerator只能渲染静态快照不要指望调用scene-render()直接生成带动画的 SVG 文件。Qt 端dashPattern像素单位转换为 SVGstroke‑dasharray需要注意坐标缩放否则虚线长短、流动速度两边观感不一致。业务上对齐两边动画速率Qt 定时器步长 和 SVG 中dur周期参数保证客户端与导出 SVG 流动速度尽量接近。大量管线场景务必使用全局定时器每个 Item 单独起 QTimer 会造成 CPU 飙升。QPainterPath转 SVG path 字符串圆弧、贝塞尔曲线需要做正确指令转换避免导出图形变形。SMIL 动画在部分老旧国产浏览器支持有限需要准备降级方案浏览器不支持动画时展示静态管线。设备告警闪烁也可以双端对齐Qt 端定时器切换画笔颜色导出 SVG 给设备 rect 节点增加animate闪烁标签。七、业务实现对接 MQTT 实时业务报文根据现场遥信遥测状态Qt 客户端、导出动态 SVG均可动态修改管道颜色、启停流动动画。八、总结做工业组态类软件业务模型与渲染逻辑解耦是非常重要的工程思路。同一套电力拓扑数据实现两套输出在QGraphicsView客户端完成交互编辑供现场操作人员组态绘图输出带 SMIL 动画的 SVG 矢量文件用于网页端、报表的预览展示。本文案例来自电力 SCADA 调度主站拓扑自动生成项目。