網絡拓撲圖上文本的巧妙應用

在前端網頁設計中，文本是重要的組成部分，那麼在網絡拓撲圖中也是同樣的，文本在網絡拓撲圖上最基本的顯示功能之一，在不一樣的應用場景下，會有不一樣的需求。可是不一樣的需求也逃不過一些基礎設置，如位置、旋轉、字體、顏色等需求。接下來咱們就來詳細聊聊 HT for Web 中文本的相關應用。

HT for Web 爲網絡拓撲圖上的節點提供了兩個文本，也確實須要兩個文本同時存在的狀況，好比車站上面的站牌，就有漢字和拼音的組合，若是作一個公交站示意圖的話，節點上的兩個文本就都用得上了。今天就模擬一個地鐵站點和你們一塊兒聊聊網絡拓撲圖上的文本應用。

今天拿來講明的 Demo 連接：http://www.hightopo.com/demo/label/index.html

從上圖能夠看出，文本有各類各樣的需求，有可能還有其餘更復雜的需求，在這邊我就抽取幾種需求來具體描述下，那咱們一步一步來調效果，先從廈門這個站點開始吧。

node.s({
	'label': '廈門',
	'label2': 'Xiamen'
});

網絡拓撲圖的建立及節點的建立我這邊就再也不多描述了，咱們直奔主題，先設置 Node 上面的兩個文本看看效果。

如上圖，能夠發現連個文本是在 Node 上不一樣的位置，顯然這樣子不是咱們想要的效果，那文本的位置又該怎麼去定義呢？這時就須要移步到咱們的《位置手冊》（http://www.hightopo.com/guide/guide/core/position/ht-position-guide.html）來了解相關的設置及含義。在咱們的風格手冊中的 ht.Style 章節有描述 label 和 label2 的位置默認值，label.position 的默認值是 31，label2.position 的默認值是 34，在位置手冊中找到兩個 label 須要擺放的位置，而後設置到 Node 上就能夠了。那麼根據前面整體效果圖中的廈門站點，能夠發現兩個 label 的位置都是在中下方，因此兩個 lable 的 position 都應該設置爲 31，當設置兩個文本的 position 都爲 31 的話，會發現連個文本是重疊的，這確定不是咱們想要的效果。仔細閱讀風格手冊，會發現連個 label 都有 offset.x 和 offset.y 連個屬性，這兩個屬性很好理解，就是用來設置文本的偏移值的。

node.s({
	'label': '廈門',
	'label2': 'Xiamen',
	'label2.position': 31,
	'label2.offset.y': 15
});

咱們對 label2 設置了 position 屬性爲 31，和 label 的 position 屬性默認值同樣，而且設置了 label2 的 offset.y 屬性，讓 label2 向下便宜 15 個像素。

上圖的文本位置看起來舒服多了，可是感受仍是不對，沒有主次之分，是否是應該將 label 的文本大小設置大一點，別讓拼音搶了風頭，兩個文本都有 font 屬性能夠設置，並且默認值都是 12px arial, sans-serif。

node.s({
	'label': '廈門',
	'label.font': '22px arial, sans-serif',
	'label2': 'Xiamen',
	'label2.position': 31,
	'label2.offset.y': 23
});

咱們將 label 的 font 屬性適當地講字體調大了，天然 label2 的偏移值也須要作些調整，否則兩個文本就又疊在一塊兒了。

上圖的效果看着順眼多了。

看上圖，咱們又多搞了幾個 label 樣式，和前面的 label 參數差很少，就中間的兩個文本樣式多了個 rotation，還有一個文本換行。

var list = [], node;
for (var i = 0; i < 4; i++) {
	node = new ht.Node();
	node.setImage('station');
	node.p(100 + i * 100, 100);
	dm.add(node);

	list.push(node);
}
node = list[0];
node.s({
	'label': '廈門',
	'label.font': '22px arial, sans-serif',
	'label2': 'Xiamen',
	'label2.position': 31,
	'label2.offset.y': 23
});

node = list[1];
node.s({
	'label': '圖\n撲',
	'label.position': 14,
	'label.font': '22px arial, sans-serif',
	'label2': 'Hightopo',
	'label2.position': 14,
	'label2.offset.x': -7,
	'label2.rotation': -Math.PI / 2
});

node = list[2];
node.s({
	'label': '上\n海',
	'label.position': 20,
	'label.font': '22px arial, sans-serif',
	'label2': 'Shanghai',
	'label2.position': 20,
	'label2.offset.x': 6,
	'label2.rotation': -Math.PI / 2
});

node = list[3];
node.s({
	'label': '北京',
	'label.position': 3,
	'label.font': '22px arial, sans-serif',
	'label2': 'Beijing',
	'label2.position': 3,
	'label2.offset.y': -23
});

從上面的代碼能夠看到，在「圖撲」和「上海」兩個節點的 label 都加了「\n」回車轉義字符，在 HT 的內部實現中，有對「\n」回車轉義字符作解析處理，讓文本在表現上能夠換行顯示。

最後就是站點之間的連線處理了，連線能夠經過設置 Edge 的樣式 edge.points 和 edge.segments 兩個屬性來實現，在咱們的《入門手冊》（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html#ref_styleedge）中有說明其具體用法，能夠一步閱讀，這不是今天的重點，在這邊就不詳細說明了。

var bj_sh = new ht.Edge(bj, sh);
bj_sh.s(cloneObj(edgeStyle, {
	'edge.points': [
		{ x: 280, y: 50 },
		{ x: 280, y: 100 },
		{ x: 280, y: 150 }
	],
	'edge.segments': [1, 3, 3]
}));
dm.add(bj_sh);

var sh_xm = new ht.Edge(sh, xm);
sh_xm.s(cloneObj(edgeStyle, {
	'edge.points': [
		{ x: 500, y: 150 },
		{ x: 200, y: 450 }
	],
	'edge.segments': [1, 4]
}));
dm.add(sh_xm);

var xm_tp = new ht.Edge(xm, tp);
xm_tp.s(cloneObj(edgeStyle, {
	'edge.points': [
		{ x: 70, y: 430 },
		{ x: 100, y: 400 }
	],
	'edge.segments': [1, 4]
}));
dm.add(xm_tp);

如上代碼，經過 Edge 將節點鏈接起來，並設置其 edge.points 和 edge.segments 兩個樣式，從而達到文章開頭的示意圖那樣的效果，固然站點也是須要設置到相應的位置。在這邊須要注意的是，edge.points 屬性是沒有包含起點和終點的，因此，你能夠看到上圖中的代碼，按照 edge.segments 屬性計算出來的點個數和 edge.points 的數組個數是不同的，並且老是相差 2。

雖然源碼不長，可是因爲篇幅的緣由，這裏就不貼源碼了，感興趣的同窗能夠到咱們的官網上查看 Demos 的源碼，Demo 的具體連接以下：http://www.hightopo.com/demo/label/index.html