建站
咨詢
售后
建站咨詢
新聞中心
這篇“怎么開發(fā)基HTML5網(wǎng)絡(luò)拓?fù)鋱D的應(yīng)用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么開發(fā)基HTML5網(wǎng)絡(luò)拓?fù)鋱D的應(yīng)用”文章吧。
創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、黎川網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為黎川等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
用 HT 開發(fā)一個(gè)網(wǎng)絡(luò)拓?fù)鋱D是非常容易的一件事，只需要短短幾行代碼就能完成一個(gè)簡(jiǎn)單的服務(wù)器與客戶端的拓?fù)鋱D：
這個(gè)例子非常基礎(chǔ)，幾乎完成了服務(wù)器與客戶端在拓?fù)渖系乃泄δ堋Ｔ挷欢嗾f，猜猜看這個(gè)例子包括 HTML 標(biāo)簽的所有部分總共花了多少行代碼？減去空行也就 50 行，我還做了很多樣式部分的設(shè)計(jì)，畢竟給大家看的例子不能太丑嘛~
大家可以在 tuputu_jb51.rar 自行下載代碼，注意因?yàn)橛?json 文件，會(huì)存在圖片跨域問題，需要用 Firefox 或者本地服務(wù)器跑起來。
我們?cè)谧铋_始就說明一下，HT 是基于 HTML5 標(biāo)準(zhǔn)的企業(yè)應(yīng)用圖形界面一站式解決方案， 其包含通用組件、拓?fù)浣M件和 3D 渲染引擎等豐富的圖形界面開發(fā)類庫，用戶只需要引入 ht.js 即可，而且跟別的任何東西完全不沖突，因?yàn)?HT 只是聲明了一個(gè)全局變量 ht，僅此而已。
接下來解析代碼部分，首先，搭建拓?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è) div，通過 getView() 方法獲取，我們?cè)?addToDOM 方法中就用到了這個(gè)方法：
addToDOM = function(){
var self = this,
view = self.getView(), //獲取組件底層 div
style = view.style;
document.body.appendChild(view);//將底層 div 添加進(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)聽窗口大小變化，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è)置組為展開模式
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);
我們很好奇虛線是怎么做出來的？虛線的形成是搭建在連線之上的，步驟有 3 個(gè)：
引入 ht-dashflow.js 文件 ;
將連線的樣式屬性 edge.dash.flow 設(shè)置為 true；
在場(chǎng)景組件中打開虛線流動(dòng)的開關(guān)，這里就是 gv.enableDashFlow(true);
是不是非常簡(jiǎn)單！接下來我們看看怎么設(shè)置：
edge.s({//節(jié)點(diǎn)設(shè)置樣式屬性
'edge.dash': true,//顯示虛線
'edge.dash.flow': true,//開啟虛線流動(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)注，用來提示說明的：
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)注的位置（具體位置信息請(qǐng)參考HT for Web 位置手冊(cè) ），也可以使用 note.offset.x 和 note.offset.y 來改變標(biāo)注的位置。
以上就是關(guān)于“怎么開發(fā)基HTML5網(wǎng)絡(luò)拓?fù)鋱D的應(yīng)用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標(biāo)題：怎么開發(fā)基HTML5網(wǎng)絡(luò)拓?fù)鋱D的應(yīng)用
文章位置：http://ef60e0e.cn/article/geppie.html
