這篇文章主要介紹如何開發(fā)基 HTML5網(wǎng)絡(luò)拓?fù)鋱D的應(yīng)用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

譙城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

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

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

大家可以在 tuputu_jb51.rar 自行下載代碼，注意因為有 json 文件，會存在圖片跨域問題，需要用 Firefox 或者本地服務(wù)器跑起來。

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

接下來解析代碼部分，首先，搭建拓?fù)鋱D場景：

dm = new ht.DataModel();//數(shù)據(jù)容器
gv = new ht.graph.GraphView(dm);//拓?fù)浣M件 參數(shù)為dm 綁定的數(shù)據(jù)模型
gv.addToDOM();//將拓?fù)鋱D添加進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 一般將組件都設(shè)置為 absolute 的絕對定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //事件監(jiān)聽窗口大小變化，iv 為延時刷新組件         
}

然后向拓?fù)鋱鼍爸刑砑印胺?wù)器”以及“客戶端”節(jié)點：

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

var group = new ht.Group();//組，組中可以有多個節(jié)點
group.setImage('groupImage');//設(shè)置圖片
dm.add(group);
var client = new ht.Node();//這個節(jié)點是添加進組中的
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild(client);//組添加孩子
group.setExpanded(true);//設(shè)置組為展開模式
client.setPosition(200, 100);//設(shè)置節(jié)點位置 如果組中只有一個節(jié)點，那么這個節(jié)點的位置可以為組的位置

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

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

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

1. 引入 ht-dashflow.js 文件 ;

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

3. 在場景組件中打開虛線流動的開關(guān)，這里就是 gv.enableDashFlow(true);

是不是非常簡單！接下來我們看看怎么設(shè)置：

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

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

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軸偏移
});

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

以上是“如何開發(fā)基 HTML5網(wǎng)絡(luò)拓?fù)鋱D的應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！