2020-2-11 前端達人
HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.
這口號是當年心目中的產品方向，接著就朝這個方向慢慢打磨，如今 HT 算是達到了這樣的效果，談不上用盡洪荒之力，但我們對產品結果很滿意，特別是 HT 的用戶手冊，將例子和文檔無縫融合一體，小小 10 來兆開發包居然包含了四十五份手冊，數百個活生生的 HTML5 例子，還沒體驗過的同學可以點擊 http://www.hightopo.com/guide... HT 手冊入口玩一玩。
這樣綜合并可搜索的手冊入口居然還常被問及 HT 的 Demo 在哪里？只能怪這些年深入人心的用戶體驗理念，把人慣得包括很多程序員都如此之“懶”，當然也怪我們沒把用戶體驗的最后一公里做到位，于是最近 wangyinlong 同學人工例子抓圖，將數百個手冊例子進行了歸類整理，最終形成了方便大家直觀查找所有 HT 例子的頁面：http://www.hightopo.com/demos...
很明顯 http://www.hightopo.com/demos... 相比 http://www.hightopo.com/guide... 頁面，對于 HT 老用戶包括我們自己做技術支持，都感覺查找例子更直觀方便，但對于 HT 初學者，面對這一堆數百個涵括通用組件、網絡拓撲圖組件、3D 組件、矢量圖形、各種編輯器等等五法八門的 HTML5 例子盛宴，往往無從下手，為此我打算寫個《數百個HTML5例子學習HT圖形組件》的系列文章，引導各種電力、電信、工控 SCADA 等不同行業領域用戶，學習使用 HT 這全套一站式 HTML5 圖形組件。
拓撲圖組件作為最典型的 HT 客戶需求應用，自然是首篇登場。
HT 的拓撲圖組件主要基于 HTML5 的 Canvas 技術，拓撲圖是電力和電信的叫法，但該組件遠不僅僅用于呈現節點和連線，在 HT 里面我們沒把該組件狹義的稱為 Topology、Network 或 Diagram，我們將該組件類名稱為更通用的 GraphView，只要你有想象力，你可以用拓撲圖組件做出任何其他組件，對于一些需求你想不出來用啥組件實現時，往往就是拓撲圖組件需要站出來發力了：
可能大部分不在游戲領域混的同學會好奇上面兩張圖是什么鬼？這兩張是開源的 HTML5 游戲引擎工具 QICI Engine （https://github.com/qiciengine...）游戲工程抓圖，有興趣的同學可到 Github 上下載試玩。
QICI Engine：A free JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.
整個 QICI Engine 的 HTML5 游戲引擎編輯工具就是基于 HT 組件定制開發出來的，上圖刀塔場景的資源管理器就是圖標可縮放，圖集可展開合并，可縮小變成樹層次的 GraphView 拓撲圖，而第二張的動作編輯器、曲線編輯器等等部分也都是 GraphView 的身影。
現在你應該能理解為什么我說拓撲圖組件幾乎可作出任何其他組件，當然定制其他組件是需要時間精力成本的，否則也不需要有其他組件的存在意義了，開發 QICI Engine 產品是另一個故事，今天就先不展開了。HTML5 游戲已經不是啥新鮮玩意兒了，但游戲開發工具完全基于 HTML5 可運行在瀏覽器還是有點意思的，下圖附上阿明同學的得意之作《城市消消樂》抓圖，有興趣的可玩之：http://engine.zuoyouxi.com/ga...
回到今天的主題，學習使用拓撲圖，第一步就是: Get Your Hands Dirty，哪怕你不熟悉 HTML，直接照葫蘆畫瓢按 http://www.hightopo.com/guide... 的代碼構建出兩個節點三條連線：
// 創建數據模型容器
var dataModel = new ht.DataModel();
// 創建拓撲圖組件
var graphView = new ht.graph.GraphView(dataModel);
// 創建一個起始節點，設置名字和位置屬性，添加到數據模型容器
var source = new ht.Node();
source.setName('source');
source.setPosition(100, 70);
dataModel.add(source);
// 創建一個結束節點，設置名字和位置屬性，添加到數據模型容器
var target = new ht.Node();
target.setName('target');
target.setPosition(260, 70);
dataModel.add(target);
// 創建一條連線，設置起始和結束節點，添加到數據模型容器
var edge = new ht.Edge();
edge.setSource(source);
edge.setTarget(target);
dataModel.add(edge);
相信上面的代碼很直觀就能理解拓撲圖構建的原理，很多人會問 HT 如何通訊獲取數據，對后端有限制嗎？HT 只是客戶端組件，不介入到后臺通訊，因此客戶可以采用任何后臺系統，Java、C++、PHP、Node.js 等等，可采用任何通訊方式 HTTP/AJAX、WebSocket 等，采用任何數據格式 XML、JSON 或 TXT 等，只需要最后用戶根據自己格式的數據內容，采用 HT 圖形庫提供的標準 API 接口創建相應的節點、連線等圖元，設置相關的屬性信息，即可實現圖形呈現，所以 HT 組件對后臺和通訊方式沒有任何要求。
以上的例子對于名稱和位置的設置都是 demo 中隨意設置的值，真正的系統用戶一般會通過后臺數據庫查詢，然后根據業務數據內容構建圖元并設置相應的屬性。你會發現雖然在構建拓撲圖，但你80%的代碼都在和 Data 和 DataModel 打交道，這兩個又是什么鬼？其實絕大部分 HT 的客戶開發完整個系統都沒必要認真學習《HT for Web 數據模型手冊》，也不用管 HT 采用的是啥 MVC/MVP/MVVM 框架，需要深入了解的可閱讀 http://www.hightopo.com/guide... 手冊
簡單說 Data 就是 HT 的最小數據單元，對于 GraphView 組件可以說是一個圖元，一個節點或一條連線；對于 Tree 組件可以說是一個樹節點；對于 Table 組件可以說是一行記錄，這些 Data 圖元需要添加到 DataModel 的數據容器中，而 HT 的所有視圖組件 GraphView、List、Tree、Table 甚至是 3D 組件 Graph3dView 都會綁定一個數據容器，這些視圖都會監聽數據容器的事件變化，進行自身組件的刷新顯示工作，這些事件包括圖元的屬性變化、圖元的增刪，還有很重要的一個關系，就是圖元的父子關系變化。
提到父子關系讓我們來看看一個比較綜合性的小例子：http://www.hightopo.com/guide...
// 創建數據容器
dataModel = new ht.DataModel();
// 創建拓撲圖、屬性頁、列表、樹、表格、樹表組件
graphView = new ht.graph.GraphView(dataModel);
propertyView = new ht.widget.PropertyView(dataModel);
listView = new ht.widget.ListView(dataModel);
treeView = new ht.widget.TreeView(dataModel);
tablePane = new ht.widget.TablePane(dataModel);
treeTablePane = new ht.widget.TreeTablePane(dataModel);
// 創建組圖元，添加孩子節點，加入數據容器
group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());
group.addChild(hello);
group.addChild(world);
group.addChild(edge);
dataModel.add(group);
這個例子增加了設置父子關系的代碼，同時有更多的組件（拓撲圖、屬性頁、列表、樹、表格、樹表組件）綁定了同一個數據模型 DataModel，但用戶的代碼依然主要在 Data 和 DataModel 上的操作，這也是 HT 架構設計的優勢，用戶使用更多組件并沒有增加新的學習成本，只要掌握的 DataModel 的基本操作，更多的組件也是如此。
雖然圖元屬性設置、增加變化甚至是選中操作都可以通過 DataModel 搞定，但并不意味著 DataModel 是萬能的，有些需求還是需要通過 View 視圖進行。例如很多基本需求是雙擊圖元要做些業務處理，如何監聽呢？怎么從 Node 上沒找到啥 onClick 之類的接口？這可以從《HT for Web 入門手冊》的交互章節找到答案：http://www.hightopo.com/guide...
graphView.addInteractorListener(function (e) {
if(e.kind === 'clickData'){
console.log(e.data + '被單擊');
}
else if(e.kind === 'doubleClickData'){
console.log(e.data + '被雙擊');
}
});
如果你還想打破砂鍋問到底為什么不直接在 Data 或 DataModel 上提供交互處理，Data 數據是可以給很多 View 視圖共享用的，DataModel 甚至都不知道 View 視圖的存在，
他們只會派發模型變化事件，而 View 通過監聽模型的變化進行相應的更新處理，HT 的模型架構上極其類似 Facebook React https://facebook.github.io/re... 的 Flux
單向流設計理念：http://facebook.github.io/flu...
HT 的 DataModel 相當于 Flux 中的 Store 模塊，拓撲圖、樹和表格這些自然對應 View 模塊，一般發起 Action 動作就是后臺數據變化，或者用戶手工輸入表格屬性值之類，但最終都不是直接修改 View，都是從 Data/DataModel/Store 發起修改，然后數據模型派發事件給所有 View，最后 View 根據不同事件做相應的處理。
有興趣的同學可以打開 http://www.hightopo.com/guide... 控制臺，輸入如圖的代碼體驗下實時修改數據模型的效果：
剛才的例子我們提到了一個 Group 類型，這個類型圖元節點在 GraphView 上顯示成了組合效果，可雙擊展開合并，可跟隨著孩子節點的位置大小變化和自適應變動，除了 Node、Edge、Group 外，HT 還提供了 Shape、Polyline、Grid、SubGraph 等多種圖元類型，這些圖元類型都具是有針對性的展示效果，以滿足各種行業的基本圖元需求：http://www.hightopo.com/guide...
對于連線 Edge，HT 還提供了自定義走向的擴展機制，并提供了相應的預制擴展連線類型插件，參見《HT for Web 連線類型手冊》http://www.hightopo.com/guide...
當然預定義的類型再多也不可能滿足千奇百怪的行業圖元需求，這是你該閱讀下《HT for Web 矢量手冊》http://www.hightopo.com/guide... 的時候了，關于矢量的介紹以前寫過兩篇老文供大家參考：《HT全矢量化的圖形組件設計》和《HT圖形組件設計之道（二）》
以上這個例子你可以在這里玩：http://www.hightopo.com/demo/... 。相關視頻：http://v.youku.com/v_show/id_...
另外 HT 的矢量內置了 Chart 類型，矢量內置的 Chart 不同于傳統獨立的 Chart 組件，傳統的 Chart 是獨立的視圖 DOM 組件，但 HT 的拓撲是 Cavans 方式繪制，因此沒法實現 Chart 組件和普通圖元的不同層次融合顯示，但矢量的 Chart 類型倒是完美的實現了這樣的融合，很多工控應用的客戶會將矢量 Chart 與拓撲圖元素融合一體，可參見《基于HT for Web的Web SCADA工控移動應用》http://www.hightopo.com/blog/... 一文中 HT 的 Web SCADA 應用案例
當然你也可以把 HT 與 百度 ECharts 進行整合，只要是 HTML 圖形組件就可以整合到 HT 的布局容器中，可參考《ECharts整合HT for Web的網絡拓撲圖應用》，此例子將 ECharts 整合 HT 拓撲圖做了告警統計的圖表呈現效果：
除了混合第三方圖形組件庫外，HT 圖撲還能嵌入 SVG 的圖片進行矢量呈現，參見《繪制SVG內容到Canvas的HTML5應用》
在某些特殊的情況下用戶還可以將 HTML 元素嵌入作為普通的 Node 節點，并支持拓撲圖的縮放、改變大小等等操作效果，可參考《HT for Web HtmlNode 手冊》http://www.hightopo.com/guide... ，這種結合有一定的局限性，不到萬不得已不建議用戶使用該插件。
HT 提供了各種豐富的通用組件，以及復雜的拓撲圖編輯交互插件 http://www.hightopo.com/guide...，用戶分分鐘可以快速開發出各種各樣的編輯器工具。入門手冊中也有個 http://www.hightopo.com/guide... 簡單的編輯器例子，教用戶如何自定義創建節點、連線和多邊形的示例教材，學習自定義拓撲圖交互可從此例子入手。
甚至可以像 http://www.hightopo.com/guide... 這個例子那樣，關閉掉拓撲圖的所有默認交互，直接通過添加原生的 HTML DOM 的事件監聽進行自定義交互邏輯處理。
構建出拓撲圖后很多人關系的是如何實現動畫，動畫從本質上來說就是在一定的時間點上驅動圖元的參數變化，例如大小、顏色、粗細包括可見不可見等來實現各種動畫效果，而 HT 本來所有圖元都是數據驅動，用戶隨時可以修改 Data 上的任何屬性，因此隨便起個定時器 windwo.setInterval 不斷改變圖元屬性值即可實現動畫效果，但為了方便客戶 HT 還提供了諸多方便函數和插件。
例如 http://www.hightopo.com/guide... 中的 ht.Default.startAnim 函數，該函數支持 Frame-Based 和 Time-Based 兩種方式的動畫，為了理解其中的 Easing 參數可參見 《透過WebGL 3D看動畫Easing函數本質》文章和 http://www.hightopo.com/guide... 這個例子
如果是持續周期的變化可采用《HT for Web 調度手冊》http://www.hightopo.com/guide... 的調度插件：
如果你喜歡 https://github.com/tweenjs/tw... 的 chaining 函數方式串聯多種動畫，可采用《HT for Web 動畫手冊》http://www.hightopo.com/guide... 的插件。對于連線流動、虛線流動等常見連線動畫需求 HT 已經封裝了相應的插件《HT for Web 流動手冊》和《HT for Web 虛線流動手冊》
HT 的拓撲圖的節點位置都是邏輯坐標，并非 GIS 的地理信息經緯度坐標，但這并不妨礙 HT 的拓撲圖可以和百度地圖、GoogleMap、OpenLayers 等第三方 GIS 地圖引擎進行整合呈現，參見《百度地圖、ECharts整合HT for Web網絡拓撲圖應用》，該文將 HT 拓撲圖、百度地圖、ECharts、HT 連線流動和面板等插件做了個綜合的呈現展示效果：http://www.hightopo.com/demo/...
拓撲圖做完呈現需求效果之后，常會有拓撲圖紙數據需要保存的需求，這個很簡單，DataModel 內置將所有數據轉換成 JSON 的功能，非常方便用戶將拓撲圖內容進行導入導出工作，一般用戶會將 JSON 數據字符串化并進行壓縮，然后存到后臺數據庫或文件系統，運行時再進行加載導入，這方面請參見《HT for Web 序列化手冊》，其實 HT 的可序列化功能并非為拓撲圖組件特殊設計，本質是整個 DataModel 數據層就可以序列化，所以意味著你可以存儲表格內容、樹層次關系包括 3D 場景。
關于客戶端存儲數據方面還可參考這篇文章《HTML5 Web 客戶端五種離線存儲方式匯總》
http://www.hightopo.com/guide...
另外 HT 的數據綁定功能是非常贊的特點，往往讓你意想不到的寥寥幾行代碼即可實現很有趣的功能，例如下面這個例子，實現一個 Chart 圖元在拓撲圖中，用戶看看拖拽圖元實現餅圖旋轉，雙擊切換是否中空，只有寥寥十來行代碼即可實現，我是想不到如何還能更簡單實現這樣的功能：http://www.hightopo.com/guide...
對于電信網管客戶常常有告警的特殊行業呈現需求，這方面 HT 也提供了針對電信 OSS/BSS 網管拓撲圖應用的《HT for Web 電信擴展手冊》http://www.hightopo.com/guide... 插件，針對圖元告警渲染、告警傳播等提供了特殊定制化的展示效果：http://www.hightopo.com/guide...
雖然 HT 的拓撲圖組件可以承載萬以上的拓撲圖元量，但如果這些拓撲圖元都通過手工布局那是不可思議的工作量，因此 HT 為拓撲圖組件提供的多種自動布局引擎算法，例如彈力布局、圓形布局、星型布局和層次布局等多種樣式效果
《HT for Web 自動布局手冊》http://www.hightopo.com/guide...
《HT for Web 彈力布局手冊》http://www.hightopo.com/guide...
HT 還為拓撲圖組件提供了貼心的鷹眼 Overview 插件（http://www.hightopo.com/guide...），整合上 HT 的 Panel 面板插件（http://www.hightopo.com/guide...）是用戶常見的融合拓撲和鷹眼的展示方式，鷹眼具有實時同步拓撲內容，可滾輪縮放，點擊定位，拖拽平移等操作方式，非常方便用戶瀏覽導航大數據量拓撲圖的應用場景。
拓撲圖篇就寫這些吧，HT 的拓撲圖組件還有非常多的功能，無法在一篇博客中說透，我只能蜻蜓點水的提到大部分拓撲圖應用需要關注的功能點，HT 更多的 HTML5 拓撲圖功能留給大家去探索吧。
http://www.hightopo.com/guide...
藍藍設計( www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務