今天開始我們就從最基礎解析如何建構HTML5 Canvas 拓樸圖應用，HT 內部封裝了一個拓樸圖形元件ht.graph.GraphView（以下簡稱GraphView）是HT 框架中2D 功能最豐富的元件，其相關類別庫都在ht.graph 套件下。 GraphView 具有基本圖形的呈現和編輯功能，拓撲節點連線及自動佈局功能，電力和電信等行業預定義對象，具有動畫渲染等特效，因此其應用面很廣泛，可作為監控領域的繪圖工具和人機介面，可作為一般性的圖形化編輯工具，可擴展成工作流程和組織圖等企業應用。簡單說來就是：拓樸圖是泛化的說法，電信網管的網路拓樸圖、電力的電網拓樸圖、工業控制的監控圖、工作流程圖、思考腦圖等等，簡單說就是節點連線構成的這些都是這裡指的拓樸圖。
用HT 開發一個網路拓樸圖是非常容易的一件事，只需要短短幾行程式碼就能完成一個簡單的伺服器與客戶端的拓樸圖：
這個例子非常基礎，幾乎完成了伺服器與客戶端在拓撲上的所有功能。話不多說，猜猜看這個範例包含HTML 標籤的所有部分總共花了多少行程式碼？減去空行也就50 行，我還做了很多樣式部分的設計，畢竟給大家看的例子不能太醜嘛~
大家可以在tuputu_jb51.rar 自行下載程式碼，注意因為有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 個：
是不是非常簡單！接下來我們來看看怎麼設定：
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 ）上學習，希望大家能有更多的收穫，學習是自己的事情，快動手實踐將這片文章的內容變成自己的知識吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。