基于Qt Graphics View的流程图编辑器开发实战

简介：这是一份面向C++与Qt初学者的流程图编辑器实战项目，适用于高校课程设计、GUI编程入门及图形绘制技术练习。资源完整实现了起始/终止节点、决策框、操作框、连接线等核心流程图元素，支持拖拽布局、动态连线、属性编辑、文件保存与加载等功能，覆盖图形绘制（QPainter）、事件处理（鼠标按下/移动/释放）、MVC架构实践等关键知识点。压缩包共51个文件，含6个cpp与5个h实现逻辑与界面交互，1个ui定义主窗口，37张png图标资源支撑UI美观性，1个qrc管理资源，1个pro工程配置，整体仅149KB，轻量易读。已有1919人学习下载，代码结构清晰、模块职责分明——diagramscene管理画布，diagramitem封装图形节点，arrow处理连线逻辑，mainwindow统筹控制流，是理解Qt信号槽机制与自定义图形项开发的优质参考范例。

1. 项目概述与核心需求拆解

流程图编辑器，这个选题在Qt大作业里算是出场率最高的一档。基本每个学期都能看到有人在做，网上能搜到的参考代码也不少，但真要说把"基本流程图功能"做到位——节点拖拽、连线、选中、删除、文本编辑、文件保存加载——能拿到高分或者说能在答辩现场流畅演示的，其实并不多。

我这次做的这个Qt流程图编辑器，目标很明确：不搞花哨的三维动画，也不上OpenGL那套重型渲染，就用Qt自带的Graphics View框架，把一套"够用、好用、能跑、能存"的流程图编辑能力完整落地。最终实现的功能包括节点创建与自由拖拽、节点间的连线与自动吸附、连线删除、节点文本编辑、框选、撤销重做、图片导出，以及JSON和XML两种格式的工程文件保存与加载。

这篇文章我会从整体设计思路、核心数据结构、交互实现细节、文件序列化、撤销重做机制这几个维度，一步步拆解整个项目的实现过程。适合有Qt基础、正在做类似大作业的学生，也适合想系统了解QGraphicsView框架实战用法的开发者。文末我会把踩过的坑和排查技巧一并整理出来，这部分往往是代码仓库里看不到的。

先说结论：Qt做流程图编辑器，最合理的方案就是QGraphicsView + QGraphicsScene + QGraphicsItem这套组合。这套框架天然支持图元的鼠标事件、碰撞检测、坐标变换、图层管理，不用自己造轮子去处理视图和场景的映射关系。

1.1 功能清单与使用场景

整个编辑器的功能边界，我在动工之前先列了个清单，这个清单直接决定了代码规模和开发周期：

• 节点管理：创建矩形/椭圆节点，节点带标题和描述文本，支持点击选中、拖动移动、键盘删除
• 连线功能：从节点边缘锚点拖出连线，连接到另一个节点边缘锚点，连线带箭头
• 文本编辑：双击节点进入文本编辑状态，支持修改节点标题
• 框选操作：鼠标左键拖拽框选多个节点，支持整体移动
• 画布操作：右键拖动平移画布，滚轮缩放画布，画布坐标和场景坐标实时显示在状态栏
• 撤销重做：所有修改节点、连线、位置的操作都能撤销和重做
• 文件保存：支持JSON和XML两种格式，JSON用于完整工程交互，XML用于流程展示场景
• 图片导出：当前视图内容一键导出为PNG图片

这套功能列表其实覆盖了市场上大部分简单流程图工具的核心交互，做出来之后不只是一个"大作业"，在后续做Qt相关项目的底座工具时，这套代码完全可以复用。

1.2 技术选型：为什么是Graphics View而不是QPainter硬画

这是整个项目最关键的一个决策点。很多新手会纠结：流程图嘛，不就是画矩形、画箭头吗？我直接在QWidget的paintEvent里用QPainter画不就行了？

理论上是能画，但一旦涉及交互，QPainter方案的复杂度会爆炸式增长。你需要在鼠标事件里自己判断"当前鼠标在哪个矩形上""这个矩形是否被选中""拖动时碰到的连线是哪个矩形引出的"……所有这些在Graphics View里都有现成的机制。

Graphics View框架的核心思想是：场景（QGraphicsScene）管理所有图元（QGraphicsItem），视图（QGraphicsView）负责显示和交互。每个图元自带坐标系、变换矩阵、碰撞检测和事件处理，你只需要重写对应的方法，框架会自动处理视图滚轮、拖拽缩放、图元选择状态等底层逻辑。

举个例子：想让节点可以被拖动，不需要你在mouseMoveEvent里自己算偏移量，只需要重写QGraphicsItem的itemChange方法，配合ItemIsMovable标志位，框架自动帮你做拖拽逻辑。这就是选择成熟框架的最大红利。

2. 核心数据结构与整体架构

2.1 项目目录结构与模块划分

写这种规模的项目，最忌讳把所有代码堆在mainwindow.cpp里。我采用的是按职责划分模块的方式，每个模块的代码量控制在几百行以内，调试起来思路非常清晰。

项目目录结构如下：

FlowChartEditor/ ├── FlowChartEditor.pro ├── main.cpp ├── mainwindow/ │ ├── MainWindow.h │ ├── MainWindow.cpp │ └── MainWindow.ui ├── items/ │ ├── FlowNodeItem.h │ ├── FlowNodeItem.cpp │ ├── FlowEdgeItem.h │ └── FlowEdgeItem.cpp ├── scene/ │ ├── FlowScene.h │ └── FlowScene.cpp ├── serializer/ │ ├── JsonSerializer.h │ ├── JsonSerializer.cpp │ ├── XmlSerializer.h │ └── XmlSerializer.cpp ├── commands/ │ ├── Commands.h │ └── Commands.cpp └── resources/ └── icons/

pro文件里需要重点注意的配置是C++11标准支持和QT += core gui widgets xml，XML模块是序列化器依赖的。

2.2 节点数据模型设计

节点图元是整个编辑器的基础，它的数据模型我定义为这样一个结构体，这个结构体同时也是JSON序列化的对应对象：

struct NodeData { int id = 0; QString title = "节点"; QString description = "描述文本"; QRectF rect = QRectF(0, 0, 160, 80); QColor color = QColor(94, 151, 246); QPointF pos = QPointF(0, 0); int zValue = 0; bool isStartNode = false; bool isEndNode = false; };

节点图元继承自QGraphicsObject，重写了boundingRect、paint、shape等核心方法。这里有一个关键点我需要专门说一下：boundingRect返回的范围必须比实际绘制范围大一点点，留出阴影和描边的空间。如果不留这个余量，选中节点时会出现描边被裁剪掉的问题。我在这个项目里用的是QRectF(-12, -12, rect.width() + 24, rect.height() + 24)，四周各留12像素。

关于ID的管理，我没有用全局递增的方式，而是用了一个定时器或事件计数器来生成。因为撤销重做场景中，如果ID是全局递增的，一旦撤销了创建操作再重做，ID就对不上了。具体做法是用一个QUuid生成内部唯一标识作为图元的ID，让JSON里的id字段只是给人看的展示用序号。

2.3 连线两端锚点与箭头绘制逻辑

连线是流程图编辑器里最容易做糙的部分。很多实现里，连线就是一条简单的Line，没有箭头，没有中间点控制，看起来就很简陋。我这次把连线做成了带箭头的三线连线，并且支持连线上的文字标签（比如写"是"、"否"这样的分支条件）。

连线的核心数据结构：

struct EdgeData { int id = 0; int sourceNodeId = 0; int targetNodeId = 0; QPointF sourcePoint; QPointF targetPoint; QString label; };

注意这里保存的是sourcePoint和targetPoint，而不是连线串的完整折线路径。这样做的原因是：节点移动时，连线需要实时更新。如果保存折线路径，就需要在节点移动时重新计算所有中间点，逻辑复杂而且容易出错。只保存两个端点后，每次paint的时候根据两个端点的位置动态计算中间控制点，一切都是实时生成的。

箭头绘制和连线路径的计算放在一起，我在FlowEdgeItem::paint里实现了这样一段逻辑：

QPainterPath FlowEdgeItem::getPath() const { QPainterPath path; QPointF p1 = sourcePoint; QPointF p2 = targetPoint; if (p1 == p2) { // 自环，画成椭圆 QRectF rect(p1.x(), p1.y() - 40, 60, 80); path.arcMoveTo(rect, 0); path.arcTo(rect, 0, 180); return path; } // 三点贝塞尔曲线，中间两个控制点取在水平方向上 qreal dx = qMax(qAbs(p2.x() - p1.x()) * 0.5, 40.0); QPointF c1 = p1 + QPointF(dx, 0); QPointF c2 = p2 - QPointF(dx, 0); path.moveTo(p1); path.cubicTo(c1, c2, p2); return path; }

箭头绘制我采用的是"沿曲线末端切线方向"的做法。取路径终点附近的一点，计算切线方向，然后在这个方向上画一个等腰三角形。这样不管是水平连线还是竖直连线，箭头方向永远准确指向目标节点。

提示：自环（从一个节点连到它自己）是流程图里经常出现的合法结构，很多编辑器会忽略这个场景导致崩溃。我上面用椭圆弧线来处理自环，从根源上避免了这个问题。

3. 交互实现与实操细节

3.1 节点拖拽、选择与移动的完整实现

节点拖拽是整个编辑器交互的第一优先级。我用QGraphicsItem的ItemIsMovable和ItemIsSelectable两个标志位开启框架级支持，然后重写itemChange方法来同步数据。

QVariant FlowNodeItem::itemChange(GraphicsItemChange change, const QVariant &value) { if (change == ItemPositionHasChanged) { // 通知场景更新连线的端点位置 scene()->update(); // 发出位置变化信号，让它可被撤销命令记录 emit nodeMoved(this); } return QGraphicsObject::itemChange(change, value); }

这里有一个重要细节：ItemPositionHasChanged这个信号在拖拽过程中会持续发出，如果每个信号都往撤销栈里记录一条命令，一次拖拽就会产生几百条历史记录。我的解法是在鼠标释放（mouseReleaseEvent）时，先判断节点位置是否真的发生了变化，如果变化了才统一记录一条移动命令。这与直接在mouseMoveEvent里记录相比，撤销粒度更合理，用户体验也更好。

选中状态的高亮，我是在paint里根据isSelected()动态改变描边颜色和宽度。描边从默认的1像素变成2像素的橙色，同时显示四个角的小方块。这些小方块也承担了其次一个功能——显示锚点位置，用户可以从这些锚点拉出连线。

3.2 连线交互：从锚点拖出的完整流程

连线创建的完整流程，我在FlowScene中用状态机的方式管理：

1. 鼠标按下在一个节点的锚点区域（AnchorArea），记录起点节点和锚点坐标
2. 鼠标移动过程中，动态绘制一条从起点锚点到当前鼠标位置的临时连线（橡皮筋效果）
3. 鼠标释放时，判断释放位置是否落在另一个节点的锚点区域
4. 如果命中，创建正式的FlowEdgeItem，并添加到场景中
5. 如果未命中，放弃这次连线

判断锚点命中区域，我用的不是矩形判定，而是基于锚点坐标的圆形判断，半径设为15像素。这样用户体验比矩形判定自然得多，没那么容易误触其他锚点。

锚点位置的计算逻辑在节点内部，根据rect和预设的锚点索引动态算出：

QPointF FlowNodeItem::getAnchorPos(int index) { QRectF r = rect(); switch (index) { case 0: return mapToScene(r.left(), r.center().y()); case 1: return mapToScene(r.right(), r.center().y()); case 2: return mapToScene(r.center().x(), r.top()); case 3: return mapToScene(r.center().x(), r.bottom()); default: return mapToScene(r.center()); } }

这里我在连线创建时做了一个额外的约束：同一对节点之间，避免创建重复的连线。做法是在FlowScene::createEdge里遍历已有连线，如果起点终点都匹配就不创建。这个约束避免了未来在保存数据和路径计算时出现歧义。

3.3 右键菜单与节点文本编辑细节

右键菜单我做成了动态生成。在场景的contextMenuEvent里先判断鼠标位置命中了什么：

• 命中节点：显示"删除节点"、"编辑文本"、"在前端"、"置底"
• 命中连线：显示"删除连线"、"添加标签"、"删除标签"
• 命中空白：显示"添加矩形节点"、"添加椭圆节点"、"粘贴"

文本编辑用的是内嵌的QTextEdit。双击节点时，我在节点内部创建一个QGraphicsProxyWidget，把编辑器嵌入进去，然后把焦点交给它。编辑完成后点击其他区域，代理widget销毁，文本内容写回节点数据。这种实现方式比弹出对话框用户体验好得多，也更贴近真正的流程图工具。内嵌编辑器也存在一个隐患——QGraphicsProxyWidget在节点移动和缩放时会闪烁，解决办法是在编辑期间禁用节点的移动标志位。

4. 实操过程与核心环节实现

4.1 环境配置与项目创建

开发环境的组合我用了很多次，稳定可靠：Qt 5.15.2 + MinGW 32-bit，操作系统Windows 10。这套组合的优势是MinGW免去了VS那套繁琐的环境变量配置，对新手更友好。如果你用的是MSVC版本，记得在pro文件里手动加CONFIG += c++14，因为有些老版本Qt的MSVC模板不自动开启C++14。

在创建项目的第一步，不要急着写代码。我建议先把pro文件里的配置做完，这几行配置会在后面的开发中帮你省掉很多麻烦：

QT += core gui widgets xml CONFIG += c++14 DEFINES += QT_DEPRECATED_WARNINGS SOURCES += $$PWD/main.cpp \ ... HEADERS += $$PWD/... \ RESOURCES += $$PWD/resources.qrc

重点说一下QT += xml。很多人做XML序列化的时候会动态地在main函数里QCoreApplication::setAttribute(Qt::AA_Use96Dpi)或者通过#include <QtXml>来规避pro链接问题，实际用起来经常会遇到编译通过但链接报错的情况。加上xml模块后，QDomDocument这些类就能直接用了，别省这一行。

4.2 文件夹与PRO的关键配置

资源文件系统我建议优先用qrc，而不是直接引用磁盘路径。因为qrc文件路径会打包进可执行文件，发布时不需要额外带着图标文件夹到处跑。下面是resources.qrc的写法：

<RCC> <qresource prefix="/"> <file>icons/add.png</file> <file>icons/open.png</file> <file>icons/save.png</file> <file>icons/undo.png</file> <file>icons/redo.png</file> <file>icons/export.png</file> </qresource> </RCC>

工具栏图标的使用方式：

ui->actionSave->setIcon(QIcon(":/icons/save.png"));

注意qrc路径必须加冒号前缀。这里的坑是，如果你新建qrc文件时没把子目录加进<file>标签，或者目录层级一不小心变了，编译不会报错，但运行起来图标就是空白。排查方式是在Qt Creator左侧"资源"面板里展开qrc文件，逐项检查路径与实际文件是否一致。

4.3 JSON序列化与反序列化的核心代码

JSON格式我用的是Qt原生的QJsonDocument。这套序列化代码最核心的要求是：保存时和加载时的字段名必须严格一致。下面给出我封装的完整序列化器：

class JsonSerializer { public: static QByteArray serialize(FlowScene* scene) { QJsonObject root; root["type"] = "flowchart"; root["version"] = 1; root["nodeCount"] = scene->nodes().size(); root["edgeCount"] = scene->edges().size(); QJsonArray nodesArray; for (FlowNodeItem* node : scene->nodes()) { QJsonObject obj; obj["id"] = node->nodeId(); obj["title"] = node->title(); obj["description"] = node->description(); obj["color"] = node->color().name(); obj["x"] = node->pos().x(); obj["y"] = node->pos().y(); obj["width"] = node->rect().width(); obj["height"] = node->rect().height(); nodesArray.append(obj); } QJsonArray edgesArray; for (FlowEdgeItem* edge : scene->edges()) { QJsonObject obj; obj["id"] = edge->edgeId(); obj["sourceNodeId"] = edge->sourceNode()->nodeId(); obj["targetNodeId"] = edge->targetNode()->nodeId(); obj["label"] = edge->label(); edgesArray.append(obj); } root["nodes"] = nodesArray; root["edges"] = edgesArray; QJsonDocument doc(root); return doc.toJson(QJsonDocument::Indented); } static bool deserialize(const QByteArray& data, FlowScene* scene) { QJsonParseError error; QJsonDocument doc = QJsonDocument::fromJson(data, &error); if (error.error != QJsonParseError::NoError) { return false; } QJsonObject root = doc.object(); QJsonArray nodesArray = root["nodes"].toArray(); // 先清空现有场景 scene->clearAll(); QMap<int, FlowNodeItem*> idToNode; for (const QJsonValue& val : nodesArray) { QJsonObject obj = val.toObject(); FlowNodeItem* node = new FlowNodeItem(); node->setNodeId(obj["id"].toInt()); node->setTitle(obj["title"].toString()); node->setDescription(obj["description"].toString()); node->setColor(QColor(obj["color"].toString())); node->setRect(QRectF(0, 0, obj["width"].toDouble(), obj["height"].toDouble())); node->setPos(obj["x"].toDouble(), obj["y"].toDouble()); scene->addNode(node); idToNode[obj["id"].toInt()] = node; } QJsonArray edgesArray = root["edges"].toArray(); for (const QJsonValue& val : edgesArray) { QJsonObject obj = val.toObject(); int srcId = obj["sourceNodeId"].toInt(); int dstId = obj["targetNodeId"].toInt(); if (idToNode.contains(srcId) && idToNode.contains(dstId)) { FlowNodeItem* src = idToNode[srcId]; FlowNodeItem* dst = idToNode[dstId]; FlowEdgeItem* edge = new FlowEdgeItem(src, dst); edge->setEdgeId(obj["id"].toInt()); edge->setLabel(obj["label"].toString()); scene->addEdge(edge); } } return true; } };

这里的一个设计要点是：节点ID和连线ID在保存前都要在内存里保证唯一，加载时用QMap做ID到指针的映射，这样连线的起点终点可以直接通过ID查找指针，不需要遍历查找。这种映射方案在节点数量多时的性能优势很明显，从O(n)降低到O(1)。

4.4 图片导出到PNG功能

图片导出我用的渲染方式是QGraphicsScene::render配合QImage，这比抓取屏幕区域更可靠，因为不需要视图处于可见状态。以下代码可以直接把Scene的全部内容渲染成一张图片：

void MainWindow::exportToPng() { QString fileName = QFileDialog::getSaveFileName(this, "导出图片", "flowchart.png", "PNG图片 (*.png)"); if (fileName.isEmpty()) return; QRectF sceneRect = scene->itemsBoundingRect().adjusted(-20, -20, 20, 20); QImage image(sceneRect.size().toSize(), QImage::Format_ARGB32); image.fill(Qt::white); QPainter painter(&image); painter.setRenderHint(QPainter::Antialiasing, true); painter.setRenderHint(QPainter::TextAntialiasing, true); scene->render(&painter, image.rect(), sceneRect); if (image.save(fileName)) { statusBar()->showMessage("图片已导出: " + fileName, 3000); } }

这里有一个隐藏的坑：itemsBoundingRect()返回的是所有图元的外接矩形，但如果你在空白处添加了文字标签，它不会被计入。更好的做法是在导出时让用户手动选择导出范围，或者在场景内维护一个"导出范围框"的图元。考虑到这是大作业场景，用itemsBoundingRect()外加20像素的边距补丁已经足够。

5. 撤销重做机制设计与实现

5.1 命令模式还是快照模式

流程图编辑器的撤销重做，有两种主流实现思路：命令模式和快照模式。

命令模式是把每一次操作抽象成一个Command对象，例如CreateNodeCommand、MoveNodeCommand、DeleteEdgeCommand，每个Command实现undo()和redo()。这种模式内存占用小、逻辑清晰，但实现成本高，每加一个新功能就要写对应的命令类。

快照模式就简单粗暴得多：每次操作前序列化整个场景，撤销时把场景恢复到上一份快照。

考虑到我开发的是大作业项目，我选择了命令模式，但只在最核心的创建、删除、移动三个操作上实现了命令对象。这样整个撤销重做机制足够支撑日常操作，又不会把代码量膨胀到不可维护。如果你时间充裕，再把属性修改（如改标题、改颜色）也纳入命令管理，效果会更好。

5.2 命令类的实现框架

下面是我写的MoveNodeCommand的完整实现，它演示了命令模式的核心写法：

class MoveNodeCommand : public QUndoCommand { public: MoveNodeCommand(FlowScene* scene, FlowNodeItem* node, const QPointF& oldPos, const QPointF& newPos, QUndoCommand* parent = nullptr) : QUndoCommand(parent), m_scene(scene), m_node(node), m_oldPos(oldPos), m_newPos(newPos) { setText(QString("移动节点: %1").arg(node->title())); } void undo() override { if (m_node) { m_node->setPos(m_oldPos); m_node->scene()->update(); } } void redo() override { if (m_node) { m_node->setPos(m_newPos); m_node->scene()->update(); } } private: FlowScene* m_scene; FlowNodeItem* m_node; QPointF m_oldPos; QPointF m_newPos; };

QUndoCommand是Qt自带的撤销命令基类，QUndoStack管理命令栈。这里的关键是，命令对象在构造函数里就把所有参与恢复的数据（旧位置、新位置）保存好了，不能等到redo()执行时才去获取。

5.3 与QUndoStack的整合

QUndoStack的使用非常直接：所有命令的push操作都经过undoStack->push(command)。当用户点击撤销按钮时，undoStack->undo()自动调用栈顶命令的undo()，同时把命令弹出。重做按钮同理。

// 工具栏动作绑定 connect(ui->actionUndo, &QAction::triggered, undoStack, &QUndoStack::undo); connect(ui->actionRedo, &QAction::triggered, undoStack, &QUndoStack::redo); // 删除节点的动作，内部通过命令栈操作 void MainWindow::onDeleteNode(FlowNodeItem* node) { QUndoCommand* cmd = new DeleteNodeCommand(scene, node); undoStack->push(cmd); }

这里还有一件需要注意的事：DeleteNodeCommand里记录的是节点的全部数据，而不是只记录地址。因为redo()删除节点后，节点指针已经无效了，必须保存一份NodeData副本，undo()时才可以通过副本重建节点。

我最终把NodeData结构体在序列化器里做了复用，让命令对象和JSON序列化使用同一套数据结构。这样改动一处，撤销、重做、保存、加载就全部同步更新，不会出现四套代码各管各的、修一个漏三个的情况。

6. 常见问题与排查技巧实录

6.1 节点拖不动或拖了不更新

这个现象很常见，尤其是刚把ItemIsMovable标志加上时。排查思路有两个方向：

第一，确认节点确实加了可移动标志。有时候你是在构造函数里加的，但如果场景里也做了flush或原型，可能被清零了。第二，也是最容易被忽视的：视图本身开启了scene->setSceneRect或者视图的setDragMode设置为了RubberBandDrag模式。RubberBandDrag模式下，鼠标左键默认用于框选，会让节点拖拽失效。解决办法是使用setDragMode(QGraphicsView::NoDrag)，并自己实现框选。

6.2 连线断断续续、拐角不圆滑

如果连线在节点移动时出现断裂感，原因通常是节点发送了位置更新信号但连线没有响应该信号。我在FlowScene里建立了一个监听机制，节点位置变化后，通过scene()->update()触发所有连线重绘，同时所有与节点关联的连线重新计算端点位置。如果这一步没做，连线仍然保存着旧坐标，就会出现"线在原地，节点已经走了"的Bug。

6.3 保存的JSON文件打开乱码或加载失败

JSON文件用UTF-8保存，读取时也要显式指定UTF-8。很多初学者直接用QTextStream的默认编码读取，Windows下默认是本地代码页（GBK），导致中文变成乱码。务必在打开文件时显式设置编码：

QTextStream stream(&file); stream.setCodec("UTF-8"); QString jsonString = stream.readAll();

另外JSON解析失败时，务必打印error.errorString()，而不是只调用doc.isNull()。isNull()返回true的信息太少，无法定位具体是哪一行出了问题。

6.4 Qt版本配置不当导致编译失败

这个问题在配置Qt 5.15.2 + VS2015时尤其常见。最简单的建议是不要用VS编译器，直接上MinGW，配合Qt自带的官方安装包，配置难度直接下降一个量级。如果必须用VS编译，注意在pro文件里加上：

QMAKE_CXXFLAGS += /std:c++14

不加这一行，C++11的新特性可能会被MSVC默认关闭，导致一堆奇怪的编译错误。

6.5 常见问题速查表

这里的崩溃问题值得多说两句。QGraphicsScene要求所有加入场景的Item必须在同一个线程，并且父对象要么是nullptr要么是场景本身。我debug时经常遇到的崩溃场景是：在构造函数里new了一个节点，延迟到某个信号槽才把它addItem进场景，结果在这之间调用了节点的方法，让它访问了尚未设置父对象的资源，直接段错误。稳妥做法是：创建节点后立即scene->addItem(node)，晚一点不要紧，但不要在空中裸操作。

7. 功能扩展方向与个人经验总结

流程图编辑器做完这一个版本之后，后续可以扩展的方向其实还有不少。如果你学有余力，我建议优先考虑这几个方向，它们能显著提升作品的完成度。

第一是增加"子图"或分组功能，类似Visio里的容器概念，可以把一组节点归到一个组里成块移动。这个在Qt里实现并不难，给节点增加一个parentGroup字段，然后对组内的所有节点统一做坐标变换即可。

第二是增加自动布局功能。当你手动画了50个节点之后，手动把节点排列整齐是个很痛苦的过程。可以引入Graphviz的布局引擎（通过调用dot -Tplain命令），或者自己实现简单的拓扑排序和层次布局算法。

第三是增加"导出到图片"后的后续处理，比如导出时根据节点颜色自动生成图例，或者在图片里嵌入操作日志信息。这些细节虽然不会影响核心功能，但能让答辩现场的效果好很多。

我个人在实际操作中最深的体会是：Graphics View框架的上手门槛其实不在画图，而在理解场景坐标、视图坐标和鼠标事件这三者之间的关系。你只要把"鼠标点击的位置是视图坐标，要转换成场景坐标才能做图元命中检测"这个概念吃透，后续很多交互逻辑都会变得非常自然。

最后再分享一个小技巧：调试图元交互时，不要直接在复杂的场景里调试。新建一个空的测试窗口，只放一个灰色矩形和一个按钮，把交互逻辑放在这里跑通后再挪回主场景。这个习惯让我在开发过程中省掉了大量反复启动整个项目的时间。流程图编辑器的核心难点从来都不在某个单一功能上，而在多个功能之间的协作关系——拖拽要联动连线，删除要联动命令栈，保存要联动序列化，这些模块之间的接口设计清晰了，整个项目自然就顺了。

本文还有配套的精品资源，点击获取