天天看點

電信網絡拓撲圖自動布局之總線

這個函數名是 setEdgeType,顧名思義,它是用來自定義一個 EdgeType 的,那麼第一個參數 type 就是用來定義這個 EdgeType 的名稱,在 Edge 的樣式上設定 edge.type 屬性為 type 值,就可以讓這條連線使用是我們自定義的 EdgeType。

那這第三個參數呢,是決定連線是否影響起始或結束節點上的所有連線,這個參數解釋起來比較複雜,後續有機會的話,我們再詳細說明。

電信網絡拓撲圖自動布局之總線

上圖中,可以看到節點間的連線并不是普通的直線,或者簡單的折線,而是漂亮的曲線,那麼這樣的曲線是怎麼生成的呢?既然将這個例子放到這邊作為案例,那麼它一定使用了自定義 EdgeType 的功能,觀察圖檔可以發現曲線其實可以用二次方曲線來表示,是以呢,我們在 setEdgeType 函數的回調中傳回的連線走向資訊中,将其描述為一條二次方曲線就可以了。說得有些繞,我們來看看代碼實作吧。

電信網絡拓撲圖自動布局之總線

上圖就是一個總線的簡單例子,所有的節點都通過線條連結黑色的總線,連線的走向都是節點到總線的最短距離。

來講講整體的設計思路吧,其實總的來說,就是點的線的垂直點計算問題。那麼問題來了,碰到曲線怎麼辦?其實曲線也是可以微分成線條來處理的,至于這個線段的劃分精細度就需要使用者來自定義了。

電信網絡拓撲圖自動布局之總線

但是,像上圖所示的橢圓形總線該如何處理呢?對于這種有固定表達式的形狀,我們就不需要用曲線分割的方法來做總線布局了,我們完全可以擷取到圓或者橢圓上的一點,是以在處理圓和橢圓上,我們擷取 Edge 連邊節點中線連成線,然後計算出夾角,通過圓或者橢圓的三角函數表示法計算出總線上的一點,這樣來構成連線。

在上圖中,我們用到了 ShapeLayout 來自動布局和總線相連的節點,讓其相對均勻地分布在總線周圍,對于 ShapeLayout 的相關設計思路我們在後面的章節中再具體介紹。

繼續閱讀