2024年5月8日发(作者：)
第
46
卷第
1
期
2020
年
2
月
信息化研究
Informatization Research
Vol. 46 No. 1
Feb. 2020
基于
Qt
的复杂流程图控件设计与实现
梁波，杨新民
(
中国电子科技集团公司第
28
研究所，南京，
210007)
：随着国产关键软硬件的日益推进和广泛应用，应用系统对基于国产软硬件平台下的流程
开发和显示需求日益迫切。本文针对国产化软硬件环境下流程图开发和应用需求，提出采用
Qt
开发
摘要
复杂流程图控件。该控件一套代码能够跨不同操作系统平台进行编译和运行，对软硬件性能要求较
低，支持不同种类复杂流程的显示，提供丰富的开发接口，满足多种应用需求的二次开发。
关键
词
:
跨平台；流程图
；Qt
中图分类号：
TP391. 72
〇引言
图形化流程监控界面具有直观形象、易于理解、
交互方便、操作方便的特点，是各类应用操作人员和
应用开发人员的首选[1]。基于Windows平台，各软
件厂商提供很多可进行二次开发的流程图控件产品，
如微软 Microsoft Office Visio、亿图图7TC专家 EDraw
Max、矢量图像绘制软件Diagram Designer等。Visio
是其中使用最为广泛的产品，能够进行各种复杂图形
设计，功能强大，接口丰富，并提供图元定制功能[2’3]。
然而，在软硬件国产化的大潮流下，各类应用软
件均开始向以龙芯CPU+中标麒麟操作系统、飞腾
CPU+银河麒麟操作系统为典型配置的国产化软
硬件环境进行迁移，对于应用软件开发人员，急需有
一套轻量级和易于二次开发的基于国产化软硬件平
台的流程图控件。
Diagram Designer是一个强大的跨平台应用程
序，能够快速简单地在文档中创建专业的图标和插
图，提供矢量绘图工具、库以及许多预置的图例形
状，但对软硬件的运行环境要求较高。Concept-
Draw Office 也是一种跨平台的控件产品 ，但其缺点
是体积庞大、接口复杂，不适合嵌人到应用系统进行
二次开发。到目前，市场上还未找到一套基于国产
化软硬件平台、功能完善、开发轻便、规模小巧、对运
行环境要求较低的流程图控件。
本流程图控件是完全基于国产操作系统中自带
Qt语言开发的流程图控件，现有国内几大生产厂商
收稿日期：
2019-10-10
提供的国产操作系统均自带Qt开发环境，如中标
麒麟操作系统、银河麒麟操作系统。本流程图控件
不需要另外购买和安装开发环境，小巧轻便、跨平台
运行，基本能够满足常用流程图二次开发需求和应
用需求。
1开发语言介绍
Qt是奇趣科技公司提供的一个完整的C++图
形用户界面应用程序开发框架，能够“一次编写，随
处编译”，开发人员使用应用程序的单一源码来构建
可以运行在不同平台下的应用程序w。
Qt的二维图形引擎是基于QPainter类，该类既
可以绘制各种几何形状，也可以绘制像素映射、图像
和文字，同时还支持线性变换，如平移、旋转、错切和
缩放[5]。Qt的视图体系包括一个QGraphicsScene充
当的场景和一些由QGaphicsItem的子类充当场景中
的项。Qt4. 7提供了几个预定义的QGraphicsItem
子类，包括 QGraphicsLineltem、QGraphicsPixmapI-
tem、QGraphicsSimpleTextltem(应用于纯文本）以
及QGraphicsTextItem(应用于多文本），用户可以
从QGaphicsItem派生自己需要的类。
2流程图控件设计与实现
2.1总体架构设计
本流程图控件从Qt提供的基类QObject、图形
元素类QGraphicsItem、线形元素基类QGraphics-
Lineltem、图形布局兀素类 QGraphicsLayoutltem
等基本类直接进行继承和派生，总体框架如图1所
示，控件是基于Qt提供的基本开发类，主要包括基
• 59 •
•技术与应用•
信息化研究
2020年2月
本图元层、功能支撑层、应用支撑层;再根据实际应 态监视，可以运用于各种的业务流程监控以及操作
用通过二次开发构成4
4类综合应用，如工作监控、状 状态监控等方面。控件总体框架如图1所示t
综合应用
工作监控状态监视流程监控业务监控
应
用
支
拓扑排序路径计算时间计算
应用提醒
撑
(前序、后序）(关键路径、最短路径）
(最短时间、最长时间…）
(倒计时、告警…）
|
|
功
网
能
连通检査闭环检査变焦切换流程维护
数
支
络
撑
传
据
输
访
接
U
结构解析
元素布局
消息收发风格设置
接
P
连接线类
节点类
文本 文^
^ /~ ^
1文本1 1文本1
直接连接线并行连接线 分叉连接线长方形 正方形 圆形
!
Qt
QtCore
j
!
QtGui
!!
QtXml
!
!
QtSql
!
!
QtNetwork
|
!
图
1
控件总体框架
1) 基本图元层
基本类直接进行继承和派生，形成图中最底层的基
从人机交互角度提供流程图显示的基本图元，
本图元类。流程图基本图元类的派生关系如图2
分连接线和节点两大类。连接线类分直接连接线、
所示。
并行连接线、分叉连接线三种;节点类分长方形、正
基本图元类包括两大类，分别是连接线类和节
方形和圆形三种。
点类。
2) 功能支撑层
1) 连接线类
通过结构解析，功能支撑层可以对图元进行编
(1) 直接连接线类（Ctrl_GraphicsLink):
排，对流程图进行元素布局和维护;接人网络传输[6]
直线直接连接两个图元，在目的图元连接点处绘制
和数据库接口，可以进行信息收发和数据库访问；对 三角形箭头。
图元关联相关基本信息，对流程图的连通性和闭环
(2) 并行连接线类（Ctrl_GraphicsLinkPara
性进行检查以及风格设置[7]。
lel):在两个图元之间存在多条并行连接线，用于绘
3) 应用支撑
制与直接连接线平行的非直接连接线。
基于常用流程图应用分析，应用支撑层对功能
(3) 分叉连接线类（Ctrl _ GraphicsLink
支撑层提供的接口进行二次封装，提供应用所需要
Bmnch):从主流程拆分成多个流程，或从多个流程
的常规支撑功能，如路径计算、时间计算、应用提醒、 汇总为主流程时，绘制分支线和汇总线。
菜单功能挂接和少量的规则处理等，供综合应用灵
2) 节点类
活选用。
(1) 圆形图形节点类（Ctrl_GraphicsNodeCir-
2.2基本图元设计
cle) 0
流程图控件从Qt提供的基类QObject、图形元 (2) 矩形图形节点类（Ctrl_GraphicsNodeRec
素类 QGraphicsItem、线形元素基类 QGraphicsLi-
angle)(包括长方形和正方形）。
neltem、图形布局元素类 QGraphicsLayoutltem 等
•
60
•
条—
第46卷第1期
梁波，等:基于
Qt
的复杂流程图控件设计与实现
•技术与应用•
图形布局元素类
图形元素类
Qt
基类
QGraph
icsLay
outltem
线形元素基类
QGraph
icsltem
QObject
QGraphicLineltem
A
7^
图形基类
Ctrl
GraphicsBase
线条
颜
颜
文本
宽
色
指
色
线条
度
针
状
信
态
息
取
i
一
v
设置线
条
色
色
取
文
设
置
文
本
度
针
取设
置
取设
置
线
条
取
I
设
置
状
态
宽
指
信
息
V
t
节点基类
Ctrl
_
Graph
icsNodeBase
直接连接线类
Ctrl
GraphicsLink
背
连
景
外
接
颜
起始
节
上
框
线
色
集
合
终
连
接节点
止
连
接
下
文
菜单
点
图
下
颜
文
色
菜
单
上
形中心
三角
形
箭头
多
点
起始
点
位置
位
终止
点
位置
边
形
文本
显
示区
设置几何形状
文本
显
示区
域
文本
显
示区
域
中
宽
心
度
点
位置
大小变化事件
域
髙
度
上下文菜单事件
获取中心点位置(纯虚函数）
获取连接中心点的直线与图形交点(纯虚函数)
区域事件
增加一条连接线
形状事件
移除一条连接线
节点跟踪事件
上下文菜单事件
绘画事件
重新定位事件
获取起始连接节点
终止连接节点
修改连接线状态
矩形图形节点类
圆形图形节点类
Ctrl
GraphicsNodeRectangle
Ctrl
分叉连接线类
并行连接线类
_GraphicsNodeCircle
Ctrl
GraphicsLinkBranch
CtrIGraphicsLinkParallel
圆半径
分叉髙度
绘画事件
使用图片
分
叉
汇
^■
标
分
叉
志
分叉偏离
区域事件
分
叉
髙
度
叉
偏
离
息
形状事件
区域事件
分
折
位
置
设置显示区域属性
绘画事件
形状事件
绘画事件
益前由/、占
外围区域事件
区域事件
获取连接+心点的直线与图形交点
获取中心点
绘画事件
获取长方形的宽度
获取连接中心点的直线与图形交点
获取长方形的高度
设置半径大小
获取半径大小
图2基本图元继承关系
图3直接连接线示意图
图4并行连接线示意图
• 61 •
•技术与应用•
信息化研究2020年2月
2.3基于
XML
的流程描述设计
将整个流程图通过格式化方式进行描述[8’9]，包括
流程图总体信息、分支流程信息、连接线信息、节点信
息，并对该描述进行格式撕，将信息置于对应容器中。
1) 流程图总体信息
基于XML的流程图总体信息描述为：
<流程ID>
<父流程ID〉
(1) 基于Qt二维图形引擎，实现流程图显示风
格的设置，如字体颜色、大小，线条的颜色、粗细，流
程图背景，流程图图元间隔大小、底色等。
(2) 基于QtNetWork提供的网络传输功能，能
够与远程终端实现网络传输以及消息收发。
(3) 基于QtSql实现数据库表和视图的访问，
实现数据库读取和存储操作。
(4) 基于QtXML或者（2)中的数据库访问接
<是否复杂模式>
2) 分支流程信息
基于XML的分支流程信息描述为：
<名称>
<对应单位ID>
<是否主流程>
<所在行序号>
由若干分支流程形成分支流程集合。
3) 节点信息
基于XML的节点信息描述为：
<名称>
<节点ID>
<流程ID>
<所在行序号>
<所在列序号>
<节点状态>
<与前一节点距离>
< 口令>(口令，为一集合）
由若干节点形成节点集合。
4) 连接线信息
基于XML的连接线信息描述为：
<内容描述>
<操作步骤IDX/操作步骤ID>
<连接线类型>(连接线
类型，〇直接连接、1并行、2分叉或汇总）
<是否上方>
<距主流程距离>
<是否汇总>(是否汇总，1
表示线形是汇总，〇表示线形是分叉）
<对应单位ID>
<起始节点ID>
<终止节点ID>
由若干连接线形成连接线集合。
2.4功能支撑设计
为实现对应用支撑，流程图构件能够实现如下
功能：
• 62 •
口，对流程图的结构进行解析，形成流程图的总体信
息、分支流程容器、节点容器、连接线容器等内容。
(5) 针对(3)中的各类容器信息，通过有向图相
关算法实现流程图的连通检查和闭环检查。
(6) 通过总体信息的“父流程ID”信息和指定节
点信息的“流程ID”信息可以回退到上一层流程图
和进人节点对应的细化流程图，实现流程的缩放。
(7) 提供用户对流程图进行编辑维护功能，
保存人库或形成XML文件。
2.5应用支撑设计
为支撑各种综合应用，控件基于功能支撑层实
现功能，又具有如下应用支撑：
(1) 针对分支流程容器、节点容器、连接线容器
等内容，基于有向图拓扑排序方法，提供流程的拓扑
排序和任务调度功能；
(2) 针对应用需求，基于连接线或者节点赋予
的参数信息，可以采用图关键路径和图最短路径算
法对外提供求解关键路径和最短路径的功能接口；
(3) 为满足类似于施工网络图的实际应用，控件
基于连接线或者节点赋予的参数信息，提供基于
AOE或AOV的最早开始时间、最迟开始时间、可晚
开始时间、总机动时间、自由机动时间等计算功能；
(4) 针对上述应用提供各种信息的应用提醒功能
2.6相关图形绘制算法
1) 矩形连接点模型算法研究
首先连接两个节点类图元中心,形成一条连接
线，将该连接线与节点类图元的边框进行相交判断，
其中圆形节点直接得到圆与直线的相交点，矩形类
节点需要将连接线分别与四条边进行相交判断，找
出连接线与两个节点类图元的交点。两个交点的连
接线就是需要画出的流程线。
2) 连接线箭头绘制模型算法研究
首先计算流程线与X轴之间的夹角大小，然后
根据流程线终点位置和箭头的边长计算箭头的另外
两个点的位置，由流程线终点和计算出的两个点组
成的多边形(实际为三角形)即为连接线箭头。
并
第46卷第1期
梁波，等:基于
Qt
的复杂流程图控件设计与实现
•技术与应用•
3流程图控件应用
4结束语
本流程图控件已经在多个项目中得到应用，相
基于流程图控件的配置信息，应用软件能够轻
同代码只需要重新编译就可以运行在不同操作系统
松实现对流程的“全过程”“全要素”“多适应”“可变
上，功能强大、接口丰富简单、易于扩展，能够支持不
焦”的监控。
同显示要求的二次应用开发。
目前，针对国产化软硬件环境，尚未有其他图形
下面是典型的应用界面。
化的流程图控件。该控件使用Qt语言开发，通过
(1)简单模式的典型流程示例如图6所示，整
可配置的格式化信息加载，能够进行跨平台编译和
个流程图有一条主流程（中间一根流程线），节点与
运行，界面直观清晰，配置简单方便，性能较好，实现
节点之间通过直接连接线和并行连接线进行串联。
了在国产化平台上的流程监控和显示，具有较好的
通用性和扩展性。
参考文献
[1]
齐新战，孙春生.基于数据流图的仿真训练软件测试用例
生成
[J].
西南科技大学学报
,2013,3(28) :86 - 88.
[2]
黄劲杉，眭結■基于
Microsoft Visio 2002
构建仿真图形化
建模环境
[J].
系统仿真学报
,
2003,4(15) :601
-
603.
[3]
杜东升，孙学华
.
基于
MS Visio
的网络工控流程图软件
[J].
电气时代，
2005(1): 74-76.
[4] (
加
)
布兰切特（
Blanchette
，
J),(
英）萨默菲尔德（
Summer-
(2)
复杂模式的典型流程示例如图
7
所示，整
field，M ).C++ GUIQt4
编程
(
第
2
版
)[M].
闫锋欣，曾泉
个流程没有主流程，节点之间通过直接连接线、并行
人，张志强，译
.
北京：电子工业出版社，
2008.
连接线和分叉连接线串联。
[5]
郑向宁
.Qt
坐标变换及应用
[J].
电子技术与软件工程，
2015(5)
：
91,
[6]
雷停
.
基于
Qt
的跨平台网络通信的设计与实现
[J
].网络安
全技术与应用，
2014(5)
:
92
-
96.
[7]
凡髙娟
,
侯彦娥
.
基于有向图的数据流图的
E-R
模型构建
方法
[J].
计算机与现代化
,2014(6): 12- 16.
[8]
周从军
.
XML
程序设计
[M].
天津:天津大学出版社
，
2010.
[9]
陈广智，李磊.基于
XML
的流程信息可视化方法及其实现
[J].
计算机工程与设计
,2015,4(36) :937 - 941.
梁波（
1983—)
，男，高级工程师，主要研究方向为
指挥信息系统总体设计等。
图
7
复杂模式典型流程示例
Design and Realization of a Trans-platform Control for Drawir^ Complex DFD Based on Qt
Liang Bo, Yang Xinmin
(The 28th Research Institute of China Electronics Technology Group Corporation, Nanjing 210007, China)
Abstract
：
With the progressive development and universal application of domestically-produced key soft
ware and hardware, it is increasingly urgent for application system to satisfy the flow development and displa
ying under the platform domestically produced. The complex flow chart raised in this article directly based upon
Qt development, in which one set of codes can be compiled and work under different platform. And it is with
low requirements for the qualities of software and hardware, supports the display of different kinds of complica
ted flows, provides rich development interface, and satisfies the redevelopment of diverse application requirement.
Key words
：
trans-platform
；
flowchart
；
Qt
•
63
•
发布评论