Qt之使用GraphicsView框架實現(xiàn)思維導圖的示例

更新時間：2022年05月11日 14:17:35 作者：前行中的小豬

思維導圖可以更方便的整理知識，本文主要介紹了Qt之使用GraphicsView框架實現(xiàn)思維導圖的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、簡述

我們常見的思維導圖類型XMind軟件，功能十分強大，提供了各式各樣的導圖樣式、形式，那我們可以用Qt實現(xiàn)思維導圖的功能嗎，答案肯定是可以的，用圖說明。

1、靜態(tài)方式

讀取本地數(shù)據(jù)的方式進行展示。

在這里插入圖片描述

2、優(yōu)化

（1）增加選中效果
（2）優(yōu)化連接線條

在這里插入圖片描述

3、動態(tài)方式

（1）可自由添加/刪除節(jié)點
（2）雙擊可重命名節(jié)點
（3）可折疊節(jié)點
（4）每層節(jié)點顏色可自定義
（5）支持xml格式數(shù)據(jù)的保存/讀?。赏卣篂槠渌袷交驍?shù)據(jù)庫）

在這里插入圖片描述

線條繪制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);
	}
}

目前只實現(xiàn)了初步導圖的基礎功能，后續(xù)會增加更多的樣式選擇及拓展。

到此這篇關于Qt之使用GraphicsView框架實現(xiàn)思維導圖的示例的文章就介紹到這了,更多相關Qt GraphicsView思維導圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: