今天開(kāi)始我們就從最基礎(chǔ)解析如何構(gòu)建 HTML5 Canvas 拓?fù)鋱D應(yīng)用，HT 內(nèi)部封裝了一個(gè)拓?fù)鋱D形組件 ht.graph.GraphView（以下簡(jiǎn)稱 GraphView）是 HT 框架中 2D 功能最豐富的組件，其相關(guān)類庫(kù)都在 ht.graph 包下。GraphView 具有基本圖形的呈現(xiàn)和編輯功能，拓?fù)涔?jié)點(diǎn)連線及自動(dòng)布局功能，電力和電信等行業(yè)預(yù)定義對(duì)象，具有動(dòng)畫渲染等特效，因此其應(yīng)用面很廣泛，可作為監(jiān)控領(lǐng)域的繪圖工具和人機(jī)界面，可作為一般性的圖形化編輯工具，可擴(kuò)展成工作流和組織圖等企業(yè)應(yīng)用。簡(jiǎn)單說(shuō)來(lái)就是：拓?fù)鋱D是泛化的說(shuō)法，電信網(wǎng)管的網(wǎng)絡(luò)拓?fù)鋱D、電力的電網(wǎng)拓?fù)鋱D、工業(yè)控制的監(jiān)控圖、工作流程圖、思維腦圖等等，簡(jiǎn)單說(shuō)就是節(jié)點(diǎn)連線構(gòu)成的這些都是這里指的拓?fù)鋱D。

用 HT 開(kāi)發(fā)一個(gè)網(wǎng)絡(luò)拓?fù)鋱D是非常容易的一件事，只需要短短幾行代碼就能完成一個(gè)簡(jiǎn)單的服務(wù)器與客戶端的拓?fù)鋱D：

這個(gè)例子非常基礎(chǔ)，幾乎完成了服務(wù)器與客戶端在拓?fù)渖系乃泄δ堋Ｔ挷欢嗾f(shuō)，猜猜看這個(gè)例子包括 HTML 標(biāo)簽的所有部分總共花了多少行代碼？減去空行也就 50 行，我還做了很多樣式部分的設(shè)計(jì)，畢竟給大家看的例子不能太丑嘛~

大家可以在 tuputu_jb51.rar 自行下載代碼，注意因?yàn)橛?json 文件，會(huì)存在圖片跨域問(wèn)題，需要用 Firefox 或者本地服務(wù)器跑起來(lái)。

我們?cè)谧铋_(kāi)始就說(shuō)明一下，HT 是基于 HTML5 標(biāo)準(zhǔn)的企業(yè)應(yīng)用圖形界面一站式解決方案， 其包含通用組件、拓?fù)浣M件和 3D 渲染引擎等豐富的圖形界面開(kāi)發(fā)類庫(kù)，用戶只需要引入 ht.js 即可，而且跟別的任何東西完全不沖突，因?yàn)?HT 只是聲明了一個(gè)html' target='_blank'>全局變量 ht，僅此而已。

接下來(lái)解析代碼部分，首先，搭建拓?fù)鋱D場(chǎng)景：

dm = new ht.DataModel();//數(shù)據(jù)容器gv = new ht.graph.GraphView(dm);//拓?fù)浣M件 參數(shù)為dm 綁定的數(shù)據(jù)模型gv.addToDOM();//將拓?fù)鋱D添加進(jìn)body體中

HT 的所有組件的根部都是一個(gè) p，通過(guò) getView() 方法獲取，我們?cè)?addToDOM 方法中就用到了這個(gè)方法：

addToDOM = function(){  var self = this, view = self.getView(), //獲取組件底層 p style = view.style;  document.body.appendChild(view);//將底層 p 添加進(jìn) body 體中  style.left = 0 //HT 一般將組件都設(shè)置為 absolute 的絕對(duì)定位 style.right = 0  style.top = 0  style.bottom = 0  window.addEventListener( resize , function () { self.iv(); }, false); //事件監(jiān)聽(tīng)窗口大小變化，iv 為延時(shí)刷新組件 }

然后向拓?fù)鋱?chǎng)景中添加“服務(wù)器”以及“客戶端”節(jié)點(diǎn)：

var server = new ht.Node();server.setName( server //設(shè)置節(jié)點(diǎn)名稱，顯示在節(jié)點(diǎn)下方server.setImage( serverImage //設(shè)置節(jié)點(diǎn)圖片server.setSize(20, 60);//設(shè)置節(jié)點(diǎn)大小dm.add(server);//將節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器dm中server.setPosition(100, 100);//設(shè)置節(jié)點(diǎn)坐標(biāo)(x, y)var group = new ht.Group();//組，組中可以有多個(gè)節(jié)點(diǎn)group.setImage( groupImage //設(shè)置圖片dm.add(group);var client = new ht.Node();//這個(gè)節(jié)點(diǎn)是添加進(jìn)組中的client.setName( client client.setImage( clientImage dm.add(client);group.addChild(client);//組添加孩子group.setExpanded(true);//設(shè)置組為展開(kāi)模式client.setPosition(200, 100);//設(shè)置節(jié)點(diǎn)位置 如果組中只有一個(gè)節(jié)點(diǎn)，那么這個(gè)節(jié)點(diǎn)的位置可以為組的位置

服務(wù)端與客戶端的連線？2 行代碼搞定！其實(shí) HT 中添加節(jié)點(diǎn)的方法非常簡(jiǎn)單，一般就 2 行代碼能結(jié)束：先聲明實(shí)例變量，然后將這個(gè)實(shí)例變量添加進(jìn)數(shù)據(jù)容器中。

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

我們很好奇虛線是怎么做出來(lái)的？虛線的形成是搭建在連線之上的，步驟有 3 個(gè)：

引入 ht-dashflow.js 文件 ;

將連線的樣式屬性 edge.dash.flow 設(shè)置為 true；

在場(chǎng)景組件中打開(kāi)虛線流動(dòng)的開(kāi)關(guān)，這里就是 gv.enableDashFlow(true);

是不是非常簡(jiǎn)單！接下來(lái)我們看看怎么設(shè)置：

edge.s({//節(jié)點(diǎn)設(shè)置樣式屬性 edge.dash : true,//顯示虛線 edge.dash.flow : true,//開(kāi)啟虛線流動(dòng) edge.dash.color : yellow ,//虛線顏色 edge.dash.pattern : [8, 8],//虛線樣式 label : flow ,//節(jié)點(diǎn)注釋 label.background : pink ,//節(jié)點(diǎn)注釋背景顏色 });

這樣所有的顯示部分就介紹完畢啦~等等，好像還少點(diǎn)什么？對(duì)了，我忘了介紹 HT 中的 ht.Group 類了，顧名思義，就是“組”的意思，組中可以包含很多節(jié)點(diǎn)，雙擊可顯示或隱藏組內(nèi)的所有節(jié)點(diǎn)，上面代碼有寫到，但是我還做了一點(diǎn)小動(dòng)作，就是組右上角的顯示部分，其實(shí)就是一個(gè)標(biāo)注，用來(lái)提示說(shuō)明的：

group.s({ group.background : rgba(255, 255, 0, 0.1) ,//設(shè)置組的背景顏色 note : Double click me! ,//標(biāo)注 顯示的內(nèi)容 note.position : 13,//標(biāo)注位置 note.offset.y : 10,//標(biāo)注位置y軸偏移});

我們可以通過(guò) note.position 來(lái)改變標(biāo)注的位置（具體位置信息請(qǐng)參考HT for Web 位置手冊(cè) ），也可以使用 note.offset.x 和 note.offset.y 來(lái)改變標(biāo)注的位置。

全部代碼解析完畢！我會(huì)盡快更新，如果大家覺(jué)得進(jìn)度慢的話，可以自己去我們官網(wǎng)（ HT for Web ）上學(xué)習(xí)，希望大家能有更多的收獲，學(xué)習(xí)是自己的事情，快動(dòng)手實(shí)踐將這片文章的內(nèi)容變成你自己的知識(shí)吧！
相關(guān)推薦：

有向圖之任務(wù)調(diào)度拓?fù)鋱D介紹

詳解HTML5網(wǎng)絡(luò)拓?fù)鋱D整合OpenLayers實(shí)現(xiàn)GIS地圖應(yīng)用（圖）

HTML5網(wǎng)絡(luò)拓?fù)鋱D性能優(yōu)化的圖文詳解

以上就是HTML5 網(wǎng)絡(luò)拓?fù)鋱D應(yīng)用實(shí)例講解的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。