基于Qt的流程设计器（一）

一：

先来看一下界面的截图：

 

说明：

拖动节点的时候，与该节点相关的箭头连线也会跟着调整；

用户可使用鼠标从一个节点拖出一个箭头到另外一个节点（鼠标在空白区域点击一下，拖出的箭头消失）

 

这三个图标，手型图标处于选中状态的时候，节点能够拖动，

箭头图标处于选中状态的时候，可使用鼠标绘制连线箭头

最后一个图标，用于在画布上建立一个节点方框

 

二：

关键代码文件以下图（用红框框住的为关键代码文件）

其余文件均为辅助代码文件（有些文件中的代码没有用到）

 

三：

CustomView类是咱们的绘图面板，这个类继承自 QGraphicsView

在这个类的构造函数中，咱们建立了他的 QGraphicsScene

并设置了它的大小（这也是为何咱们的绘图板有滚动条的缘由）

另外须要注意的是QGraphicsScene的坐标原点在中心位置，以下图所示

 

 

四：

CustomArrow是描述箭头连线的类：

这个类继承自 QGraphicsItem

boundingRect是 QGraphicsItem的虚函数，必需要实现，

其中1.5是箭头连线的线宽，8是箭头张开后所占的区域宽度

p1是箭头的起始点，p2是箭头结束点（也就是带箭头的那一端）

最终返回的一个Rect结构以下图所示：（注意箭头的起点，在上一个方框的中心点上）

 

五：

我给CustomArrow类公开了一个adjust函数，旨在当方框节点移动的时候，从新计算箭头的起始位置、结束位置、箭头的角度

代码以下：

 

其中：itemA是起始处的方框节点，itemB是结束处的方框节点

注意mapFromItem是把方框节点中心点映射到scene坐标系中

紧接着的if,else是为了判断起始方框是否位于结束方框的下方，若是是，那么箭头的终点应该在结束方框的下边框上

接下来是计算出箭头的两个点arrowP1和arrowP2

 

六：

绘制箭头的工做是在CustomArrow的paint函数中完成的，代码以下所示

箭头只不过是一个多边形，用drawPolygon画出来的

 

七：

CustomRect继承自 QGraphicsRectItem

在这个类型中，咱们重载了itemChange函数，代码以下

当当前方框节点移动后，与这个节点相关的箭头都要跟着移动

Arrows就是与当前方框节点有关的箭头

 

八：

在来看一下CustomRect的MousePressEvent的代码

在这个代码中，

咱们先为全局标志ScenClickFlag赋值，

这个标志着当前点击的是一个方框节点，仍是点击在画布的空白处了

接下来判断箭头按钮是否是处于选中状态

再往下判断是否是已经记录了起始方框，若是没记录，那么就记录并返回

再接下来，就意味着用户是点击的结束方框，这时要绘制一个箭头了，

固然首先要判断是否是已经存在了一样的箭头，若是存在了，就不必再绘制了，

ScenClickFlag置成true是为了冒泡触发画布的点击事件（后续会讲为何要容许事件冒泡）

接下来执行了绘制箭头的逻辑，并在起始节点和结束节点分别记录了箭头的指针

之后这两个节点移动的时候，箭头也会跟着移动了。

 

 

 

未完待续，喜欢的话请点推荐（您的支持，是个人动力）--------------------->

代码会在下一篇文章中发布