Qt之使用GraphicsView框架实现思维导图功能

置顶前行中的小猪

已于 2023-11-08 16:17:51 修改

阅读量6k

点赞数 16

分类专栏： Qt GraphicsView框架文章标签： qt 开发语言 GraphicsView

于 2022-05-10 18:20:29 首次发布

本文链接：https://blog.csdn.net/goforwardtostep/article/details/124692790

版权

Qt 同时被 2 个专栏收录

40 篇文章

订阅专栏

GraphicsView框架

3 篇文章

订阅专栏

本文介绍如何利用Qt框架开发一款具备基础思维导图功能的应用。内容包括静态和动态展示方式，如读取本地数据、自由添加/删除节点、节点重命名等。此外，还展示了线条绘制的代码实现，支持圆角折线和圆滑曲线的切换，并提供动态编辑和修改操作。目前应用已支持XML数据的保存和读取，未来将增加更多样式和拓展功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简述

我们常见的思维导图类型XMind软件，功能十分强大，提供了各式各样的导图样式、形式，那我们可以用Qt实现思维导图的功能吗，答案肯定是可以的，用图说明。

1、静态方式

读取本地数据的方式进行展示。
在这里插入图片描述

2、优化

（1）增加选中效果
（2）优化连接线条
在这里插入图片描述

3、动态方式

（1）可自由添加/删除节点
（2）双击可重命名节点
（3）可折叠节点
（4）每层节点颜色可自定义
（5）支持xml格式数据的保存/读取（可拓展为其他格式或数据库）

在这里插入图片描述

更新

（1）增加圆角折现和圆滑曲线两种状态切换
（2）增加动态编辑和静态显示
（3）增加修改操作
在这里插入图片描述

更新 1.1

Item增加设置图片效果。
在这里插入图片描述

线条绘制Code

void LineTest::paintEvent(QPaintEvent *event)
{
	QPoint startPoint = m_startPoint;
	QPoint endPoint = m_endPoint;
	int hSpace = 15;
	int radius = 8;

	QPainter painter(this);
	painter.setRenderHint(QPainter::Antialiasing, true);
	painter.setPen(QPen(Qt::gray, 2, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
	// 判断是上弧线还是下弧线;
	if (endPoint.y() < startPoint.y())
	{
		// 绘制横线;
		painter.drawLine(startPoint, startPoint + QPoint(hSpace, 0));

		// 绘制竖线;
		startPoint += QPoint(hSpace, 0);
		QPoint vTopPoint = QPoint(startPoint.x(), endPoint.y() + radius);
		painter.drawLine(startPoint, vTopPoint);

		// 绘制上弧线;
		startPoint = vTopPoint;
		QPoint hTopPoint = QPoint(startPoint.x() + radius, endPoint.y());

		QPainterPath path(startPoint);
		// 绘制贝塞尔三次曲线;
		QPointF c1 = QPointF(startPoint.x(), hTopPoint.y());
		QPointF c2 = QPointF(startPoint.x() + 2, hTopPoint.y() + 2);
		path.cubicTo(c2, c2, hTopPoint);
		painter.drawPath(path);
		
		// 绘制横线;
		startPoint = hTopPoint;
		painter.drawLine(startPoint, endPoint);
	}
	else if (endPoint.y() > startPoint.y())
	{
		// 绘制横线;
		painter.drawLine(startPoint, startPoint + QPoint(hSpace, 0));

		// 绘制竖线;
		startPoint += QPoint(hSpace, 0);
		QPoint vBottomPoint = QPoint(startPoint.x(), endPoint.y() - radius);
		painter.drawLine(startPoint, vBottomPoint);

		// 绘制下弧线;
		startPoint = vBottomPoint;
		QPoint hBottomPoint = QPoint(startPoint.x() + radius, endPoint.y());

		QPainterPath path(startPoint);
		// 绘制贝塞尔三次曲线;
		QPointF c1 = QPointF(startPoint.x() + 2, hBottomPoint.y() - 2);
		QPointF c2 = QPointF(startPoint.x() + 2, hBottomPoint.y() + 2);
		path.cubicTo(c1, c1, hBottomPoint);
		painter.drawPath(path);

		// 绘制横线;
		startPoint = hBottomPoint;
		painter.drawLine(startPoint, endPoint);
	}
	else
	{
		// 绘制直线;
		painter.drawLine(startPoint, endPoint);
	}
}