Qt （高仿Visio）流程图组件开发（一） 效果展示及基本开发框架构思

文章目录

本系列目录

Qt （高仿Visio）流程图组件开发（一） 效果展示及基本开发框架构思
Qt （高仿Visio）流程图组件开发（二） 基本图元绘制 图元间连线绘制
Qt （高仿Visio）流程图组件开发（三） 图元基类如何定义，流程图多种图元类型实现
Qt （高仿Visio）流程图组件开发（四） 流程图 图元对齐 磁吸线功能
Qt （高仿Visio）流程图组件开发（五） 流程图 双击编辑图元内容实现
Qt （高仿Visio）流程图组件开发（六） 流程图 线图元 如何绘制曲线 连接线移除视口后无法显示
Qt （高仿Visio）流程图组件开发（七） 流程图 简单操作界面搭建
Qt （高仿Visio）流程图组件开发（八） 流程图 鼠标拖动图元到场景（QGraphicsScene）创建
Qt （高仿Visio）流程图组件开发（九） 流程图 代码展示

前言

  最近因为工作原因需要使用Qt开发一个类似于Visio的流程图组件，需满足基本的流程图功能，图元类型可自定义扩展，不同图元存有各类自定义数据，可以保存为xml文件，可以读取xml文件生成流程图等等。
  一开始考虑直接使用画家绘制流程图，坐标系转换、选中、移动、橡皮条等等都由自己维护实现，初步定义结构体和架子后，发现其要实现与维护的内容过多，即使完全画家绘制可以避免很多qt框架上的问题，但也总有一种得不偿失的感觉，所以放弃了这个想法，改为使用qt自带的QGraphicsView框架来实现。
  本文主要展示流程图目前的实现效果，以及前期框架的构思思路，之后会继续更新具体的实现。

一、效果展示

这里展示一个已经建好的流程图

如果想看具体功能展示可以观看视频

流程图演示

二、GraphicsView 框架

在Graphics View绘图架构中，主要涉及到下面三个类的使用：

• 场景类（QGraphicsScene）：该类提供绘图场景（Scene），场景是不可见的，是一个抽象的管理图形项的容器，可向场景中添加图形项，获取场景中的某个图形项等，主要功能如下： 1、提供管理大量图元的快速接口； 2、传播事件到场景中的每个图元； 3、提供未经变换的渲染功能，主要用于打印； 4、管理图元状态，如图元选择和焦点处理；
• 视图类（QGraphicsView）：该类提供绘图的视图（View）组件，用于显示场景中的内容。可以为一个场景设置几个视图，用于对同一个数据集提供不同的观察方式；
• 图形项类（QGraphicsItem）：该类提供了一些基本的图形元件，也可在此基础上自定义图形项，它支持各种事件的响应，如鼠标事件、键盘事件、拖放事件等，以实现图形的交互功能。

三、基本思路

1、图元基类

  首先需要考虑定义一个图元基类，考虑清楚这个，之后的开发与扩展会容易许多。
  从绘制上考虑，图元除线图元外大多可以用矩形涵盖，所以图元基类需要有获取矩形区域的接口，具体获取方式不予考虑；从流程上考虑，每一个图元都需要保存其父类图元与子类图元，所以子类添加，子类删除这类通用的接口可以在基类中实现；父类、子类对象维护在了基类对象中，那么图元数据肯定也需要统一维护，这个时候就需要定义一个图元基类结构体了。

2、结构体基类

  数据相关的结构体基类不可能一下子考虑完全，这里直接展示部分结构体定义，基本为画家绘制时常用的一些属性。

结构体代码如下（示例）：

// 图元样式信息structFlowchartStyleBase{
    QPen                            pen_;// 基本画笔样式--背景相关
    QBrush                            brush_;// 基本画刷样式--背景相关
    QPen                            text_pen_;// 文本画笔样式
    QFont                            font_;// 字体样式FlowchartStyleBase(){
        pen_ =QPen();
        pen_.setColor(QColor(65,113,156));
        pen_.setWidth(1);

        brush_ =QBrush(QColor(89,152,209));

        text_pen_ =QPen();;
        text_pen_.setColor(QColor(254,255,255));
        text_pen_.setWidth(1);

        font_ =QFont("Microsoft YaHei",12,2);}};// 图元数据信息structFlowchartContentBase{
    QString        id_;// 图元id
    QString        content_;// 图元内容
    QString        tooltip_;// 图元提示信息FlowchartContentBase(){
        id_ = QUuid::createUuid().toString();
        content_ ="Text";
        tooltip_ ="Tooltip";}};// 图元结构体基类structFlowchartInforBase{double                            position_x_, position_y_, width_, height_;
    FlowchartStyleBase                item_style_;
    FlowchartContentBase            item_content_;FlowchartInforBase(){
        position_x_ =0.0;
        position_y_ =0.0;
        width_ =160.0;
        height_ =40.0;
        item_style_ =FlowchartStyleBase();
        item_content_ =FlowchartContentBase();};FlowchartInforBase(double _x,double _y,double _width =160.0,double _height =40.0){
        position_x_ = _x;
        position_y_ = _y;
        width_ = _width;
        height_ = _height;
        item_style_ =FlowchartStyleBase();
        item_content_ =FlowchartContentBase();};};

  构思基类需要实现内容后，就可以了解GraphicsView 框架的使用了，根据框架先简单的绘制一个矩形到视口上。。。。。。

3、文件与实现类介绍

• 软件名称 MXYFlowChart

• flowchart_global.h   主要用来存放全局的一些结构体、枚举、宏定义。
  类名含义ItemType图元类型枚举FlowchartItemType图元类型结构体FlowchartCursor鼠标样式枚举FlowchartStyleBase图元样式信息FlowchartContentBase图元数据信息FlowchartStructuralData图元父子结构关系信息FlowchartInforBase图元结构体基类

• flowchart_view.h
  类名含义FlowchartView视口类

• flowchart_scene.h
  类名含义FlowchartScene场景类SceneMode场景鼠标移动模式枚举

• flowchar_graphics_item_base.h
  类名含义FlowchartGraphicsItem图元基类

• flowchar_graphics_link.h
  类名含义FlowcharGraphicsLink连线类FlowcharGraphicsLinkInfo连线类结构体DrawLineAlignment连线绘制位置枚举

• flowchart_graphics_item.h
  类名含义FlowchartGraphicsRectItem流程矩形类FlowchartItemRectInfo流程矩形类结构体FlowchartGraphicsConditionItem判定图元类FlowchartItemConditionInfo判定图元类结构体FlowchartGraphicsCirculationItem自循环图元类FlowchartItemCirculationInfo自循环图元类结构体

• flowchar_widget.h
  类名含义FlowCharWidget流图图编辑界面FlowCharToolButtonBar工具栏FlowCharToolSideBar左侧图元编辑栏

总结

本文主要展示流程图效果及其思路，不介绍具体实现，有需要的欢迎在评论区交流。

如果此文帮助到你( •̀ ω •́ )✧，动动小手点个赞可好O(∩_∩)O。
原创文章，转载请标明本文出处。