天天看點

網絡拓撲圖上文本的巧妙應用

網絡拓撲圖上文本的巧妙應用

從上圖可以看出,文本有各種各樣的需求,有可能還有其他更複雜的需求,在這邊我就抽取幾種需求來具體描述下,那我們一步一步來調效果,先從廈門這個站點開始吧。

網絡拓撲圖的建立及節點的建立我這邊就不再多描述了,我們直奔主題,先設定 Node 上面的兩個文本看看效果。

網絡拓撲圖上文本的巧妙應用

我們對 label2 設定了 position 屬性為 31,和 label 的 position 屬性預設值一樣,并且設定了 label2 的 offset.y 屬性,讓 label2 向下便宜 15 個像素。

網絡拓撲圖上文本的巧妙應用

上圖的文本位置看起來舒服多了,但是感覺還是不對,沒有主次之分,是不是應該将 label 的文本大小設定大一點,别讓拼音搶了風頭,兩個文本都有 font 屬性可以設定,而且預設值都是 12px arial, sans-serif。

我們将 label 的 font 屬性适當地講字型調大了,自然 label2 的偏移值也需要做些調整,不然兩個文本就又疊在一起了。

網絡拓撲圖上文本的巧妙應用

上圖的效果看着順眼多了。

網絡拓撲圖上文本的巧妙應用

看上圖,我們又多搞了幾個 label 樣式,和前面的 label 參數差不多,就中間的兩個文本樣式多了個 rotation,還有一個文本換行。

從上面的代碼可以看到,在“圖撲”和“上海”兩個節點的 label 都加了“\n”回車轉義字元,在 HT 的内部實作中,有對“\n”回車轉義字元做解析處理,讓文本在表現上可以換行顯示。

網絡拓撲圖上文本的巧妙應用

如上代碼,通過 Edge 将節點連接配接起來,并設定其 edge.points 和 edge.segments 兩個樣式,進而達到文章開頭的示意圖那樣的效果,當然站點也是需要設定到相應的位置。在這邊需要注意的是,edge.points 屬性是沒有包含起點和終點的,是以,你可以看到上圖中的代碼,按照 edge.segments 屬性計算出來的點個數和 edge.points 的數組個數是不一樣的,而且總是相差 2。