HTML5 Canvas 繪製的電信網路拓撲圖

本文主要和大家介紹基於HTML5 Canvas 繪製的電信網路拓撲圖，希望能協助到大家。

電信網結構（telecommunication network structure）是指電信網各種網路單元按技術要求和經濟原則進行組合配置的組合邏輯和配置形式。組合邏輯描述網路功能的體繫結構，配置形式描述網路單元的鄰接關係，即以交換中心（或節點）和傳輸鏈路所組成的拓撲結構。常見的網路拓撲結構有星型結構、匯流排結構、環形結構、樹形結構、網狀結構、混合型拓撲以及蜂窩拓撲結構等，本文的例子主要描繪的是匯流排型拓撲，在顯示上相對其他的結構類型來說更清晰明了，繪製起來也非常容易。

雖然題目起的名字是電信網路拓撲圖，幾乎所有的拓撲圖都能涵蓋，例如基本網狀圖，網路拓撲圖，機架圖，網路通訊圖，3D網狀圖等等。

如下：

這個圖看起來挺簡單的，代碼也少，但是內容不少。

首先，機櫃01、機櫃02、機櫃03 都是 ht.Group “組”類型，ht.Group 類型用於作為父容器包含孩子圖元，在 GraphView 拓撲圖（http://www.hightopo.com）上可通過雙擊進行展開合并，合并時會自定隱藏子孫圖元節點， 如果有子節點有連線串連到外部時，合并的 Group 將代理進行串連。Group 的移動會帶動孩子節點跟隨， 孩子的位置和大小變化也會影響 Group 的展開圖形和 position 位置。

這邊提到一個代理連線的問題，“代理”兩個字可以很好地表明代理連線意義。實際上就是如果組內部的節點與組外部的節點有連線，那麼在組合并的時候，會在這個組會“代理”與外部節點之間的連線，這個就是代理連線。我們拿機櫃02來說吧，機櫃02內部有一個“電腦”與“內部網路交換器”之間有兩條連線，那麼當我們雙擊機櫃02合并時，實際上就相當於機櫃02與“內部網路交換器”之間有兩條連線了。

那麼，我們來看看如何繪製這個組以及組內部的節點吧，先建立“機櫃02”的 Group 節點，因為整個例子我建立了三個 Group 節點，而且建立的方式都類似，因此把建立組的代碼封裝起來複用：

function createGroup(name, x, y) {    var group = new ht.Group();//群組類型 實際上也是一個節點    group.setExpanded(true);//設定展開組    group.setName(name);//設定組的名字    group.s({//設定組的樣式style        'group.title.background': 'rgba(14,36,117,0.80)',//組展開後的title背景顏色，僅對group.type為空白的類型起作用        'group.background': 'rgba(14,36,117,0.40)',//組展開後的背景顏色        'group.title.align': 'center'//組展開後的title文字水平對齊，預設值為'left'，可設定為center和right    });    group.setPosition(x, y);//設定組的位置    group.setImage('images/伺服器.json');//設定拓撲上展現的圖片資訊，在GraphView拓撲圖中圖片一般以position為中心繪製    dataModel.add(group);//將建立的組節點添加進資料容器中    return group;}

組是可以通過雙擊展開合并的，展開的時候顯示的是一個有標題列的框（當然這些都是可以自訂的），合并的時候就顯示上面代碼中設定的 group.setImage 中的圖片。

所有機櫃內部的節點都是 ht.Node 類型的節點，所以我也封裝了一下：

function createNode(image, parent, x, y) {    var node = new ht.Node();//建立一個 Node 節點    if (image) node.setImage(image);//設定節點的顯示圖片    if (parent) node.setParent(parent);//設定節點的父親    if (x && y) node.setPosition(x, y);//設定節點的位置    dataModel.add(node);//將節點添加進資料容器中    return node;}

產生機櫃02：

cabinet = createGroup('機櫃02', 146, 445);//建立機櫃02createNode('images/正常.json', cabinet, 78, 440).s('label', '資料監控分析系統');//建立帶有“正常”圖片的節點，並設定這個節點的文字為“資料監控分析系統”

因為連線需要的是“源節點”以及“終節點”，這邊源節點是中間的“內部網路交換器”，我們再建立這個節點：

var line = createNode();//建立一個節點line.setSize(725, 20);//設定節點大小line.setPosition(310, 325);//設定節點位置line.s({//設定節點的style屬性    'shape': 'roundRect',//決定shape的形狀，預設值為空白，代表用image繪製。roundRect四周圓角矩形    'shape.background': 'rgba(14,36,117,0.80)',//背景填充顏色，為null代表不填充背景    'shape.border.color': '#979797',//邊框顏色    'shape.corner.radius': 10,//該參數指定roundRect類型的圓角半徑，預設為空白系統自動調節，可設定正數值    'label': '內部網路交換器', //文字內容，預設為空白    'label.position': 45,//文字內容，預設為空白    'label.offset.x': 50,//文字水平位移，對於Edge意味著沿著連線方向水平位移    'label2': '內部網路交換器',//HT預設除了label.*的屬性外，還提供了label2.*的屬性，用於滿足一個圖元需要顯示雙文字的情況    'label2.position': 48,    'label2.offset.x': 50,    'label2.offset.y': 2,});

不知道你們有沒有注意到，有一個 label2 的樣式屬性，這個是 HT 為了能在一個節點上添加兩個 label 文本而增加的功能，label 屬性和 label2 的屬性是完全相同的，只要在設定屬性的時候用 label 和 label2 區分開來就可以。

源節點和終節點都具備了，可以製作連線了：

createEdge(line, createNode('images/電腦.json', cabinet, 185, 450), 'rgb(30,232,178)', -100, true);//參數1 源節點，參數2 終節點，參數3 連線顏色，參數4 連線起始點的水平位移，參數5 是否建立兩條連線

還有一點有趣的，“交換器”的部分，最左側藍色方形的節點和中間長條的節點並不是一體的，而是分離的，但是我通過 setHost 進行節點與節點間的吸附，然後反吸附回來，這樣操作上就相當於這兩個節點是一體的：

var exchange = createNode('images/交換器.json', null, -53, 313);exchange.setHost(line);//設定吸附line.setHost(exchange);//反吸附 又設定line的吸附為exchange

因為 HT 會按照節點添加進資料容器中的順序來進行層次的排列，我的交換器是在 line 的添加之後的，所以預設交換器的節點會顯示在 line 之下，我們將預設的層級顯示關閉，並設定交換器 exchange 顯示在資料容器的頂部：

dataModel.setAutoAdjustIndex(false);//將自動調整data在容器中索引順序的開關關閉dataModel.sendToTop(exchange);//將data在拓撲上置頂