這一章把直線連線改為折線連線，沿用原來連線點的關係資訊。關於折線的計算，使用的是開源的 AStar 演算法進行路徑規劃，啟發方式為曼哈頓距離，且不允許對角線移動。

請大家動動小手，給我一個免費的 Star 吧~

大家如果發現了 Bug，歡迎來提 Issue 喲~

github原始碼

gitee原始碼

示例地址

靈感來源主要來自於下面優秀的文章：

關聯線探究，如何連線流程圖的兩個節點

主要參考了：如何挑選連線點及其真正的出入口、演算法的選型。具體程式碼沒有仔細瞭解，畢竟佈局和元素的想法不一樣，沒必要參考程式碼。

路徑規劃之 A* 演算法

主要了解一下演算法的介紹。

歐式距離、曼哈頓距離、切比雪夫距離、Octile距離

主要了解一下 AStar 演算法的各種啟發方式的差異。

路徑規劃視覺化動畫

形象的感受路徑搜尋的差異。

至於演算法本身，在目前階段下不是必須深入分析，這裡應用為主。

最優路徑

參考這張圖，基於當前案例，可以把折線想象為路徑，目標就是查詢最優路徑，例如：

又或者：

上面明顯不是我們直覺最優的路徑選擇，如：

太貼近節點了
轉彎太多

更希望是這樣：

開啟除錯模式，來說說連線點的出入口：

人為地，距離”連線點“偏離一些，定義所謂的”出入口“（途中綠色的點），作為折線真的起點和終點。

把連線先移除，看看其他點：

一共定義了 3 種點：

連線點（紅色）
出入口（綠色）
途徑點（藍色）

關於途徑點，是人為挑選的，主要（中心點除外）來自於圖中不同顏色區域（線框），這裡定義了？種區域：

連線點最小區域

為什麼不叫節點區域呢？因為此前設計的連線點是動態的，它可以節點內部的其他位置，只是目前定義的都是上下左右邊緣而已。所以，它可能比節點區域更小。

連線不可透過區域

連線不可透過擴充套件區域

兩個區域共同所在的最小區域

連線透過區域

連線透過擴充套件區域

同理，兩個區域共同所在的最小區域

演算法建模（關鍵）

上面說了那麼多點和區域，最終目的就是為了建模，可供演算法使用。
這個模型，就是一個陣列矩陣 matrix，可以理解成一個格子地圖，如：

0 代表可透過，1 代表不可透過（稱之為“牆”吧），對應的陣列矩陣，就是

[
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

計算結果是一個途徑格子座標陣列：

座標就是陣列1、2層下標，可以視作 x、y 軸。

[
	[5, 3],
	[6, 3],
	[7, 3],
	[8, 3],
	[8, 4],
	[8, 5]
]

主要問題來了，畢竟在這裡的畫板，不同於演算法示例那樣“走格子”，800x800 的畫布大小，不可能建一個 800x800 陣列矩陣，效能可吃不消，別說更大的畫布了。

所以，如何建模才是這個案例畫折線的關鍵！

這裡，拿一個大一點的例子說明：

既然，拿“畫素”當作格子不現實，可以拿“點”作為格子不就好了嗎？

陣列矩陣變成：

[
	[0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0]
]

這裡缺少了“牆”，哪些是牆？其實就是上面說的不可透過區域：

“牆”不同於連線點，需要補充一些點：

陣列矩陣變成（增加了 2 列、2 行）：

[
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

然後給陣列矩陣設定“牆”：

這裡把 2 定義為牆，所以 0、1 均能透過，方便後面區分和理解。

[
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0],
	[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0], 
	[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
	[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
	[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
	[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0], 
	[0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

連線點、連線線的出入口不應該是“牆”，調整一下：