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

梦醒梦起 2023-07-29 原文

文章目录

本系列目录

前言

最近因为工作原因需要使用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。

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

构思 Visio span class token qt 流程图 ui

有关Qt （高仿Visio）流程图组件开发（一）效果展示及基本开发框架构思的更多相关文章

ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？最佳答案设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2
这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？最佳答案我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2
?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------
Qt Designer的简单使用 - 2
在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

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