Qt （高仿Visio）流程图组件开发（二） 基本图元绘制 图元间连线绘制

已于 2022-11-18 17:07:31 修改
阅读量7.5k 收藏 70
点赞数 24
分类专栏： Qt 文章标签： qt 流程图 开发语言
于 2022-11-14 10:23:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43793182/article/details/127809529
版权

文章目录

本系列目录

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

前言

  本文主要讲解简单的实现，如何绘制图元，图元之间如何连线，拖动图元线跟随图元动，线的位置判断等等。只是经验分享，描述内容并不绝对，如有误差欢迎指正。

一、如何绘制图元

  所有的图元都可以看作“放置在”场景（QGraphicsScene）上，调用接口addItem(QGraphicsItem *item)，即可在场景添加一个图元。

	QGraphicsView* m_view = new QGraphicsView(this);
	QGraphicsScene* m_scene = m_view->scene();
	QGraphicsRectItem* rect_item = new QGraphicsRectItem();
	m_scene->addItem(rect_item);

  但是这只适用于简单的图元绘制，并不能满足我们绘制特殊图元的需求，例如样式，选中态，文本显示等等，所以我们需要通过重写图元类来绘制特殊图元。这里以流程图中的“流程”图元为例就行讲解。下面两个虚函数是我认为重写一个图元类比较主要的部分。

	public:

	virtual QRectF boundingRect() const;

	virtual void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = Q_NULLPTR);

   boundingRect() 函数主要用来确定绘制图元的形状生效范围，这个会影响到之后的选中功能。
   paint()函数主要来绘制图元的形状、内容、交互状态，但是只涉及其本身的绘制，与其他图元无关。
   图元类只关注自身相关的操作，对与全局的一些操作，例如：菜单、移动、选中、删除等等并不在该类下处理。“流程”图元实现如下：

QRectF FlowchartGraphicsRectItem::boundingRect() const
{
	QRectF rect = QGraphicsRectItem::boundingRect().adjusted(-3, -3, 3, 3);
	return rect;
}

void FlowchartGraphicsRectItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget /*= Q_NULLPTR*/)
{
	painter->setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

	painter->save();
	painter->setPen(item_infor_->item_style_.pen_);
	painter->setBrush(item_infor_->item_style_.brush_);
	painter->drawRect(this->boundingRect());
	painter->restore();

	/*[] 绘制选中外框*/
	if (this->isSelected()) {
		/*[1]: 绘制外围的矩形框 */
		QPen selected_pen(QColor(147, 147, 147));
		selected_pen.setWidth(0.5);
		selected_pen.setStyle(Qt::DashLine);

		painter->setPen(selected_pen);
		painter->setBrush(Qt::NoBrush);
		painter->drawRect(this->boundingRect());

		const auto left_center_rect = QRectF((left_point_ - QPointF(2, 2)), QSizeF(5, 5));
		const auto right_center_rect = QRectF((right_point_ - QPointF(3, 3)), QSizeF(5, 5));
		const auto top_center_rect = QRectF((top_point_ - QPointF(2, 2)), QSizeF(5, 5));
		const auto bottom_center_rect = QRectF((bottom_point_ - QPointF(3, 3)), QSizeF(5, 5));

		/*[2]: 绘制四个方向的连接点 */
		painter->setPen(QColor(147, 147, 147));
		painter->setBrush(QColor(255, 255, 255));
		painter->drawRect(left_center_rect);
		painter->drawRect(right_center_rect);
		painter->drawRect(top_center_rect);
		painter->drawRect(bottom_center_rect);
	}

	DrawItemText(painter);
}

二、两图元之间如何连线

  visio在绘制连线时，会有一根线跟随鼠标移动，最后在两个图元之间建立连线。接下来我们分析如何实现连线这一动态效果，在鼠标按下时我们添加一个线图元，位置为鼠标按下位置，鼠标移动时添加一个临时线图元，终点为当前鼠标位置。鼠标释放时，判断起点与终点的位置有哪些图元，并在起点与终点处各选取最上层的一个图元，获取两图元对象，绘制连线，删除临时线图元对象。
   绘制图元主要在鼠标事件中实现

	virtual void mousePressEvent(QGraphicsSceneMouseEvent *event);

	virtual void mouseMoveEvent(QGraphicsSceneMouseEvent *event);

	virtual void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);

   鼠标按下时创建线图元对象，并添加到场景（QGraphicsScene）中。

	temp_line_ = new QGraphicsLineItem(QLineF(event->scenePos(), event->scenePos()));
	temp_line_->setPen(QPen(QColor(89, 152, 209), 3));
	addItem(temp_line_);

   鼠标移动时创建一个临时线图元对象，并添加到场景（QGraphicsScene）中，起点为鼠标按下位置，终点为鼠标移动实时位置，以此来实现一个动态绘制连线的过程。

if (scene_mode_ == SceneMode::DrawLineItem
		&& nullptr != temp_line_) {
		// 如果临时线段不为空的时候，将press事件中的点和和移动的位置点进行连接，更新临时线
		QLineF temp_line(temp_line_->line().p1(), event->scenePos());
		temp_line_->setLine(temp_line);
	}

   鼠标释放时从场景移除线图元对象，删除临时线图元，获取起点与终点坐标，获取两点坐标最上层图元对象，两图元为基准绘制线图元。因为此时有临时线图元对象，所以需要判断获取的图元集合，并删除第一个临时线图元对象。

if (temp_line_ != nullptr && scene_mode_ == SceneMode::DrawLineItem) {

		// ! [1] 移除线段的开始点p1和结束点p2处的线段item，QGraphicsItem
		QList<QGraphicsItem*> startItems = items(temp_line_->line().p1());
		if (!startItems.isEmpty() && startItems.first() == temp_line_)
			startItems.removeFirst();
		QList<QGraphicsItem*> endItems = items(temp_line_->line().p2());
		if (!endItems.isEmpty() && endItems.first() == temp_line_)
			endItems.removeFirst();

		// ! [2] 将临时线段删除，以获取开始和结束Item，临时线段已经无用
		removeItem(temp_line_);
		delete temp_line_;
		temp_line_ = nullptr;

		// ! [3] 根据开始和结束item重新绘制带箭头的连接线
		if (!startItems.isEmpty() && !endItems.isEmpty() && startItems.first() != endItems.first()) {
			FlowcharGraphicsLink* link_item = AddStartToEndItem(QGraphToFlow(startItems.first()), QGraphToFlow(endItems.first()));
		}
	}

三、如何实现线跟随图元移动

   对于流程图元的移动只需通过接口设置运行图元移动即可，但是线图元的移动则需要我们手动去实现。首先分析，线图元是跟随其他图元进行移动的，属于被动更新，这样就有了两种实现方式：其一，其他图元提供接口或属性，线图元内部维护起点与终点图元，通过实时主动获取图元位置来更新线图元位置；其二，线图元提供接口或属性，其他图元内部维护与其连接的线图元对象，图元移动时也相应的更改线图元位置。这里采用第一种实现方式，第二种方式存在一定权限，玩家可自行实现去发现。
   第一种实现方式，在绘制连线时得到起点与终点的两个图元对象，将这两个图元作为成员对象保存到线图元中，线图元在绘制时通过接口实时获取两图元位置进行绘制。这里实现较为简单不展示代码，之后会在本系列最后展示全部代码。

四、线的位置判断

  连线在绘制时的起点与终点虽说是两图元的位置，但是具体是图元的什么位置还需要我们去实现，当然也可以直接设置为图元中心点，但这样略微有点不美观。这是一个优化的功能，与具体流程图实现没有关系，玩家可选择性学习。
  流程图元需要实现一些位置获取的接口，获取上中，下中，左中，右中，中位置五个接口进行判断，该方法是最简单粗暴的办法，玩家有其他更好的实现也可以~，代码如下：

// ! [1] 获取起始点
	switch (CompareDrawPoint(start_item_->GetCenterPoint(), end_item_->GetCenterPoint()))
	{
	case DrawLineAlignment::DrawLeft:
		start_point_ = start_item_->GetLeftPoint();
		end_point_ = end_item_->GetRightPoint();
		break;
	case DrawLineAlignment::DrawRight:
		start_point_ = start_item_->GetRightPoint();
		end_point_ = end_item_->GetLeftPoint();
		break;
	case DrawLineAlignment::DrawTop:
		start_point_ = start_item_->GetTopPoint();
		end_point_ = end_item_->GetBottomPoint();
		break;
	case DrawLineAlignment::DrawBottom:
		start_point_ = start_item_->GetBottomPoint();
		end_point_ = end_item_->GetTopPoint();
		break;
	default:
		break;
	}

// 判断箭头连线起始点类型
DrawLineAlignment FlowcharGraphicsLink::CompareDrawPoint(QPointF _start_point, QPointF _end_point)
{
	// 直线斜率
	double k_num = (double)(_end_point.y() - _start_point.y()) / (_end_point.x() - _start_point.x());
	if (k_num >= -1 && k_num <= 1)
	{
		if (_start_point.x() >= _end_point.x()){
			return DrawLineAlignment::DrawLeft;
		}
		else{
			return DrawLineAlignment::DrawRight;
		}
	}
	else
	{
		if (_start_point.y() >= _end_point.y()){
			return DrawLineAlignment::DrawTop;
		}
		else{
			return DrawLineAlignment::DrawBottom;
		}
	}
}

总结

本文主要介绍流程图的基本实现，通过此文可以简单实现一个流程图。
本文只是经验分享，描述内容并不绝对，如有误差欢迎指正。

如果此文帮助到你( •̀ ω •́ )✧，动动小手点个赞可好O(∩_∩)O。

原创文章，转载请标明本文出处。
梦醒梦起
关注
专栏目录
QT案例 使用QGraphicsView和命令模式设计完成流程图功能软件，参考QT官方流程图案例【diagramscene】
qq_35554617的博客
03-16 7528
想到使用QGraphicsView来完成相关功能，再使用命令模式来优化使用过程，再通过XML保存和加载记录等。
Qt （高仿Visio）流程图组件开发，源码分享
11-21
内容概要：Qt6.4/c++开发，仿visio实现基本流程图功能，可拖动创建图元，图元之间连线，图元编辑，磁吸线，图元类型可扩建等等。代码功能完备，编写规范，注释清晰。 适用人群：适合有流程图功能开发需求的初学者。 ...
Qt （高仿Visio）流程图组件开发仿visio实现基本流程图功能，可拖动创建图元
最新发布
09-11
内容概要：Qt6.4/c++开发，仿visio实现基本流程图功能，可拖动创建图元，图元之间连线，图元编辑，磁吸线，图元类型可扩建等等。代码功能完备，编写规范，注释清晰。 适用人群：适合有流程图功能开发需求的初学者。 主要涉及类：QGraphicsScene、QGraphicsView、QGraphicsItem。 能学到什么：学习QT视口类、场景类的使用，如何设计并实现一个简单的软件。
Qt实现流程示意图
08-08
用Qt实现流程示意图的绘画，能够实现基本的流程图，并能够进行编辑，在编辑时可以双击图形进行编辑，可够学习和研究。
探索Qt绘图之美：Diagram流程图示例程序
gitblog_09762的博客
09-06 641
探索Qt绘图之美：Diagram流程图示例程序 Diagram.rar项目地址:https://gitcode.com/open-source-toolkit/2b8f2 项目介绍 在现代软件开发中，图形界面和交互设计的重要性不言而喻。Qt作为一款强大的跨平台C++框架，广泛应用于图形用户界面的开发。为了帮助开发者更好地掌握Qt在图形界面开发中的应用，我们推出了一个基于Qt的绘制流程图示例程序—...
Qt流程图绘制
05-20
图层的操作，旋转放大等，图元的添加移动等以及图元之间的连线。流程图的绘制。
基于Qt的流程图设计
02-01
款基于QT开发的流程图绘制程序，提供了基本的图形，箭头等工具。QT是一款优秀的跨平台的GUI库.对学习QT绘图有一定参考作用
qt 绘制流程图示例程序——Diagram
11-03
qt 绘制流程图示例程序，实现了节点的添加，以及节点之间连续操作
Qt （高仿Visio）流程图组件开发（八） 流程图 鼠标拖动图元到场景（QGraphicsScene）创建
qq_43793182的博客
11-18 4020
使用过Visio的都清楚，其图元可以通过拖动的方式创建到场景中。从QT的视角来开就是把一个图元对象从一个QWidget控件拖动创建到场景中，这里使用QDrag类进行实现。1、拖放是用户在应用程序中复制或移动数据的一种直观方式，并且在许多桌面环境中用作在应用程序之间复制数据的机制。2、Qt中的拖放支持以QDrag类为中心，此类处理拖放操作的大多数细节。3、通过拖放操作要传输的数据包含在QMimeData对象中。4、setMimeData()将QMimeData对象的所有权分配给QDrag对象。
计算机图形学绘制基本图元.pdf
11-16
计算机图形学绘制基本图元.pdf
OpenGLES20_Lesson07_primitive3_基本图元的绘制之正方形平移、旋转、缩放_
10-03
基本图元绘制，实现对正方形的平移，旋转，缩放
基于Qt 5.5的流程图设计开发代码（QT自带）
03-01
本工程是使用QT 5.5和VS2010开发的流程图设计简易工具，QT SDK和VS的QT插件下载请参考：http://blog.csdn.net/joy58061678/article/details/50982576，源码参考URL为：http://doc.qt.io/qt-5/qtwidgets-graphicsview-diagramscene-example.html
Qt流程图大作业流程图编辑器，基本流程图功能均有
12-15
Qt流程图大作业流程图编辑器，基本流程图功能均有
QT流程图设计C++
01-27
Qt流程图设计
qt实现qgaphicsitem的拖动连线等操作
09-20
支持qgraphicitem在scene中拖动和缩放，支持qgraphicsitem间的连线操作，代码可扩展。
基于C++的qt流程图设计
12-15
基于C++的qt流程图设计
QT项目流程图
fj199121的博客
02-28 575
[转]QT项目生成流程例图
weixin_33805557的博客
12-29 487
最近在做一个把MFC下的项目移植到Qt上的工作，想知道Qt源文件的编译过程，但网上类似帖子比较少，这篇帖子讲解的比较深入，故转载： 这篇短文假定读者熟悉C\C++项目的基本编译过程。 moc.exe和cl.exe由于是针对2个cpp进行编译，即2个编译单元的2次调用，因此为了更清除的表达在上图中各出现了2次。 这里用一个例子演示了QT中2个重要的工具程序uic和moc的作用： 假设...
Qt （高仿Visio）流程图组件开发（一） 效果展示及基本开发框架构思
热门推荐
qq_43793182的博客
09-23 1万+
最近因为工作原因需要使用Qt开发一个类似于Visio的流程图组件，需满足基本的流程图功能，图元类型可自定义扩展，不同图元存有各类自定义数据，可以保存为xml文件，可以读取xml文件生成流程图等等。
linux系统下qt使用鼠标进行拖动绘图，连接图元连线代码
05-24
以下是一个简单的例子，演示如何在Qt中使用鼠标进行拖动绘图和连接图元连线。 ``` // MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QGraphicsScene> #include <QGraphicsView> class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = nullptr); ~MainWindow(); private: QGraphicsScene *m_scene; QGraphicsView *m_view; bool m_isDrawing; QPointF m_lastPos; void mousePressEvent(QMouseEvent *event); void mouseMoveEvent(QMouseEvent *event); void mouseReleaseEvent(QMouseEvent *event); }; #endif // MAINWINDOW_H ``` ``` // MainWindow.cpp #include "MainWindow.h" #include <QDebug> #include <QGraphicsEllipseItem> #include <QGraphicsLineItem> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), m_scene(new QGraphicsScene(this)), m_view(new QGraphicsView(m_scene, this)), m_isDrawing(false) { setCentralWidget(m_view); } MainWindow::~MainWindow() { } void MainWindow::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { if (m_isDrawing) { m_isDrawing = false; } else { m_isDrawing = true; // 创建一个圆形图元并添加到场景中 QGraphicsEllipseItem *item = new QGraphicsEllipseItem(event->pos().x(), event->pos().y(), 10, 10); m_scene->addItem(item); // 记录最后一个点的位置 m_lastPos = item->pos(); } } } void MainWindow::mouseMoveEvent(QMouseEvent *event) { if (m_isDrawing) { // 更新圆形图元的位置 QGraphicsEllipseItem *item = new QGraphicsEllipseItem(event->pos().x(), event->pos().y(), 10, 10); m_scene->addItem(item); // 创建一条线段连接前一个点和当前点，并添加到场景中 QGraphicsLineItem *line = new QGraphicsLineItem(m_lastPos.x() + 5, m_lastPos.y() + 5, event->pos().x() + 5, event->pos().y() + 5); m_scene->addItem(line); // 记录最后一个点的位置 m_lastPos = item->pos(); } } void MainWindow::mouseReleaseEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_isDrawing = false; } } ``` 在这个例子中，我们使用QGraphicsScene和QGraphicsView来显示图形。在mousePressEvent方法中，如果鼠标左键按下，我们创建一个圆形图元并将其添加到场景中。我们还记录最后一个点的位置。在mouseMoveEvent方法中，如果我们正在绘制，我们更新圆形图元的位置，并创建一条连接前一个点和当前点的线段，并将其添加到场景中。在mouseReleaseEvent方法中，如果鼠标左键释放，则停止绘制。 注意：该例子仅为演示如何在Qt中使用鼠标进行拖动绘图和连接图元连线。实际应用中，可能需要更复杂的逻辑和算法来实现更高级的绘图和连接图元功能。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦醒梦起

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值