• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
梦醒梦起
帮助13


本系列目录

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、结构体基类

  数据相关的结构体基类不可能一下子(指时间短暂或动作迅速)(指时间短暂或动作迅速)考虑完全,这里直接展示部分结构体定义,基本为画家绘制时常用的一些属性。

结构体代码如下(示例):

// 图元样式信息
struct FlowchartStyleBase
{
	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);
	}
};

// 图元数据信息
struct FlowchartContentBase
{
	QString		id_;										// 图元id
	QString		content_;									// 图元内容
	QString		tooltip_;									// 图元提示信息

	FlowchartContentBase()
	{
		id_ = QUuid::createUuid().toString();
		content_ = "Text";
		tooltip_ = "Tooltip";
	}
};

// 图元结构体基类
struct FlowchartInforBase
{
	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。

原创文章,转载请标明本文出处。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhckefjk
系列文章
更多 icon
同类精品
更多 icon
继续加载