天天看點

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

ShapeLayout 從字面上的意思了解,就是根據曲線路徑來布局節點,省去手動布局節點的繁瑣操作,還能保證平滑整齊地排布,這是手動調整很難做到的。ShapeLayout 結合前面提到的總線,是最普遍的應用。

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

<a href="http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html">http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html</a>

當然,會有人會問,對橢圓按照角度平均分成若幹份計算出來的位置并不是等距的,沒錯,确實不是等距的,這這邊就簡單處理了,如果要弧度等距的話,那這個就真麻煩了,在這邊就不做闡述了,也沒辦法闡述,因為我也不懂。

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

<a href="http://www.hightopo.com/demo/EdgeType/ShapeLayout.html">http://www.hightopo.com/demo/EdgeType/ShapeLayout.html</a>

如上圖的例子,節點沿着某條曲線均勻布局,那麼這種不是特殊形狀的連線組合是怎麼實作自動布局的呢?其實也很簡單,在前面總線章節中就有提到,将曲線分割若幹小線段,每次計算固定長度,當判斷落點在某條線段上的時候,就可以将問題轉換為求線段上一點的數學問題,和總線一樣,曲線的切割精度需要使用者來定義,在不同的應用場景中,需求可能不太一樣。

以上就是非特殊形狀的連線組合的核心代碼,這也隻是代碼片段,可能了解起來還是會比較吃力的,那麼下面我将貼上源代碼,有興趣的朋友可以幫忙瞅瞅,有什麼不妥的,歡迎指出。

繼續閱讀