当前位置：首页 > news >正文

用Qt/CPP打造多平台图形编辑器：探索与实践

news 2026/5/12 8:46:47

Qt/CPP 编写的多平台图形编辑器。其主要目标是以简单直观的方式对二维图形进行可视化编辑。纯Qt开发，不涉及第三方库。特点：轻松创建小型至中型图形（1000+ 节点/边）并进行参数化。节点和边的常见视觉属性：形状、大小、颜色、标签等。有向图、无向图和混合图。直边和多边形边，节点端口。图表及其元素的自定义（用户定义）属性。动态维护节点之间的交换列表。在图形元素及其属性中搜索。通过 GraphViz 引擎自动布局图表：dot、neato、fdp、sfdp、circo。将图表导出到：PDF、SVG、各种图像格式（BMP、PNG、JPG、TIFF 等）。支持的图形文件格式：XGR（本机图形持久化格式）、GEXF（公共子集的读/写，簇和动态属性除外）、GraphML（读/写）、GML（通过OGDF读取，通过QVGE写入）、GraphViz DOT（通过 GraphViz/boost/OGDF 读取，通过 QVGE 写入）源码：使用Qt5.13.1_MinGW编译通过。

最近在图形编辑领域折腾，用Qt/CPP写了个多平台图形编辑器，感觉还挺有意思，来和大家分享分享。

一、目标与实现路径

这个图形编辑器的主要目标，就是以一种简单直观的方式对二维图形进行可视化编辑。而且为了保证它的纯净性和可移植性，我选择了纯Qt开发，不引入任何第三方库。这就像是一场自我挑战，在Qt提供的“工具箱”里，打造出满足各种图形编辑需求的“利器”。

二、功能特点剖析

1. 创建与参数化图形

这个编辑器可以轻松创建小型至中型图形，能处理1000 + 节点/边呢。就像下面这段代码，是创建节点的简单示例：

// 创建一个节点 Node* createNode(QPointF position) { Node* node = new Node(); node->setPos(position); // 设置节点的一些默认属性 node->setShape(Node::Rectangle); node->setColor(Qt::red); node->setSize(QSizeF(50, 50)); return node; }

这里通过Node类的实例化，设置其位置、形状、颜色和大小等属性，完成一个节点的创建。节点和边都有常见的视觉属性，比如形状、大小、颜色、标签等，这些属性的设置为图形的多样化呈现提供了基础。

2. 支持多种图类型

无论是有向图、无向图还是混合图，这个编辑器都能轻松应对。比如，在表示边的时候，我们可以通过一个简单的标识来区分有向和无向：

class Edge { public: bool isDirected; // 其他边的属性和方法 };

通过isDirected这个布尔变量，就能清晰地区分边的方向特性，进而支持不同类型图的构建。

3. 多样化的边与节点端口

编辑器支持直边和多边形边，以及节点端口。在实现多边形边的时候，可以利用Qt的图形绘制功能，像这样：

void PolygonEdge::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) { Q_UNUSED(option); Q_UNUSED(widget); QPainterPath path; // 添加多边形的各个点到路径 foreach(const QPointF& point, polygonPoints) { if (path.isEmpty()) { path.moveTo(point); } else { path.lineTo(point); } } painter->drawPath(path); }

这里通过QPainterPath来构建多边形的路径，然后用painter绘制出来。

4. 自定义属性

图表及其元素支持自定义（用户定义）属性。我们可以通过一个属性映射表来实现：

class GraphElement { public: QMap<QString, QVariant> customProperties; // 设置自定义属性的方法 void setCustomProperty(const QString& key, const QVariant& value) { customProperties[key] = value; } // 获取自定义属性的方法 QVariant getCustomProperty(const QString& key) const { return customProperties.value(key); } };

这样，用户就可以根据自己的需求，为图形元素添加各种自定义属性。

5. 动态维护交换列表

动态维护节点之间的交换列表，这在实际应用中很重要，比如在进行图形的布局调整等操作时。实现这个功能可以通过一个QList来存储交换信息：

QList<NodeSwapInfo> nodeSwapList; struct NodeSwapInfo { Node* node1; Node* node2; // 交换时间等其他相关信息 };

每当有节点交换操作时，就往这个列表里添加相应的信息。

6. 搜索功能

在图形元素及其属性中搜索也是编辑器的一个亮点。我们可以通过遍历图形元素，对其属性进行匹配搜索，示例代码如下：

QList<GraphElement*> searchElements(const QString& searchText) { QList<GraphElement*> resultList; foreach(GraphElement* element, allGraphElements) { if (element->getCustomProperty("label").toString().contains(searchText) || element->getCustomProperty("description").toString().contains(searchText)) { resultList.append(element); } } return resultList; }

这里通过遍历所有图形元素，检查其特定自定义属性中是否包含搜索文本，从而找到符合条件的元素。

7. 自动布局与导出

通过GraphViz引擎实现自动布局图表，支持dot、neato、fdp、sfdp、circo等布局方式。导出功能也很强大，可以将图表导出到PDF、SVG以及各种图像格式（BMP、PNG、JPG、TIFF等）。例如导出为PDF的代码片段：

QPrinter printer(QPrinter::HighResolution); printer.setOutputFormat(QPrinter::PdfFormat); printer.setOutputFileName("graph.pdf"); QPainter painter(&printer); scene->render(&painter); painter.end();

这里利用QPrinter和QPainter实现了将图形场景渲染并输出为PDF文件。

8. 文件格式支持

支持多种图形文件格式，像XGR（本机图形持久化格式）、GEXF（公共子集的读/写，簇和动态属性除外）、GraphML（读/写）、GML（通过OGDF读取，通过QVGE写入）、GraphViz DOT（通过GraphViz/boost/OGDF读取，通过QVGE写入）。不同格式的读写操作，涉及到对文件结构的解析和生成，是个比较复杂但也很有趣的过程。