基於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是爲了冒泡觸發畫布的點擊事件（後續會講爲何要容許事件冒泡）

接下來執行了繪製箭頭的邏輯，並在起始節點和結束節點分別記錄了箭頭的指針

之後這兩個節點移動的時候，箭頭也會跟着移動了。

 

 

 

未完待續，喜歡的話請點推薦（您的支持，是個人動力）--------------------->

代碼會在下一篇文章中發佈