快速開發基於 HTML5 網絡拓撲圖應用1

今天開始咱們就從最基礎解析如何構建 HTML5 Canvas 拓撲圖應用，HT 內部封裝了一個拓撲圖形組件 ht.graph.GraphView（如下簡稱 GraphView）是 HT 框架中 2D 功能最豐富的組件，其相關類庫都在 ht.graph 包下。GraphView 具備基本圖形的呈現和編輯功能，拓撲節點連線及自動佈局功能，電力和電信等行業預約義對象，具備動畫渲染等特效，所以其應用面很普遍，可做爲監控領域的繪圖工具和人機界面，可做爲通常性的圖形化編輯工具，可擴展成工做流和組織圖等企業應用。簡單說來就是：拓撲圖是泛化的說法，電信網管的網絡拓撲圖、電力的電網拓撲圖、工業控制的監控圖、工做流程圖、思惟腦圖等等，簡單說就是節點連線構成的這些都是這裏指的拓撲圖。

用 HT 開發一個網絡拓撲圖是很是容易的一件事，只須要短短几行代碼就能完成一個簡單的服務器與客戶端的拓撲圖：

這個例子很是基礎，幾乎完成了服務器與客戶端在拓撲上的全部功能。話很少說，猜猜看這個例子包括 HTML 標籤的全部部分總共花了多少行代碼？減去空行也就 50 行，我還作了不少樣式部分的設計，畢竟給你們看的例子不能太醜嘛~

你們能夠在 http://download.csdn.net/download/u013161495/10193716 自行下載代碼，注意由於有 json 文件，會存在圖片跨域問題，須要用 Firefox 或者本地服務器跑起來。

咱們在最開始就說明一下，HT 是基於 HTML5 標準的企業應用圖形界面一站式解決方案， 其包含通用組件、拓撲組件和 3D 渲染引擎等豐富的圖形界面開發類庫，用戶只須要引入 ht.js 便可，並且跟別的任何東西徹底不衝突，由於 HT 只是聲明瞭一個全局變量 ht，僅此而已。

接下來解析代碼部分，首先，搭建拓撲圖場景：

dm = new ht.DataModel();//數據容器
gv = new ht.graph.GraphView(dm);//拓撲組件 參數爲dm 綁定的數據模型
gv.addToDOM();//將拓撲圖添加進body體中

HT 的全部組件的根部都是一個 div，經過 getView() 方法獲取，咱們在 addToDOM 方法中就用到了這個方法：

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //獲取組件底層 div
        style = view.style; 
    document.body.appendChild(view);//將底層 div 添加進 body 體中           
    style.left = '0';//HT 通常將組件都設置爲 absolute 的絕對定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //事件監聽窗口大小變化，iv 爲延時刷新組件         
}

而後向拓撲場景中添加「服務器」以及「客戶端」節點：

var server = new ht.Node();
server.setName('server');//設置節點名稱，顯示在節點下方
server.setImage('serverImage');//設置節點圖片
server.setSize(20, 60);//設置節點大小
dm.add(server);//將節點添加進數據容器dm中
server.setPosition(100, 100);//設置節點座標(x, y)

var group = new ht.Group();//組，組中能夠有多個節點
group.setImage('groupImage');//設置圖片
dm.add(group);
var client = new ht.Node();//這個節點是添加進組中的
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild(client);//組添加孩子
group.setExpanded(true);//設置組爲展開模式
client.setPosition(200, 100);//設置節點位置 若是組中只有一個節點，那麼這個節點的位置能夠爲組的位置

服務端與客戶端的連線？2 行代碼搞定！其實 HT 中添加節點的方法很是簡單，通常就 2 行代碼能結束：先聲明實例變量，而後將這個實例變量添加進數據容器中。

var edge = new ht.Edge(server, client);
dm.add(edge);

咱們很好奇虛線是怎麼作出來的？虛線的造成是搭建在連線之上的，步驟有 3 個：

1. 引入 ht-dashflow.js 文件 ;
2. 將連線的樣式屬性 edge.dash.flow 設置爲 true；
3. 在場景組件中打開虛線流動的開關，這裏就是 gv.enableDashFlow(true);

是否是很是簡單！接下來咱們看看怎麼設置：

edge.s({//節點設置樣式屬性
    'edge.dash': true,//顯示虛線
    'edge.dash.flow': true,//開啓虛線流動
    'edge.dash.color': 'yellow',//虛線顏色
    'edge.dash.pattern': [8, 8],//虛線樣式
    'label': 'flow',//節點註釋
    'label.background': 'pink',//節點註釋背景顏色        
});

這樣全部的顯示部分就介紹完畢啦~等等，好像還少點什麼？對了，我忘了介紹 HT 中的 ht.Group 類了，顧名思義，就是「組」的意思，組中能夠包含不少節點，雙擊可顯示或隱藏組內的全部節點，上面代碼有寫到，可是我還作了一點小動做，就是組右上角的顯示部分，其實就是一個標註，用來提示說明的：

group.s({
    'group.background': 'rgba(255, 255, 0, 0.1)',//設置組的背景顏色
    'note': "Double click me!",//標註 顯示的內容
    'note.position': 13,//標註位置
    'note.offset.y': 10,//標註位置y軸偏移
});

咱們能夠經過 note.position 來改變標註的位置（具體位置信息請參考 HT for Web 位置手冊），也可使用 note.offset.x 和 note.offset.y 來改變標註的位置。

所有代碼解析完畢！我會盡快更新，若是你們以爲進度慢的話，能夠本身去咱們官網（HT for Web）上學習，但願你們能有更多的收穫，學習是本身的事情，快動手實踐將這片文章的內容變成你本身的知識吧！