網(wǎng)絡(luò)拓?fù)鋱D上文本的巧妙應(yīng)用
在前端網(wǎng)頁(yè)設(shè)計(jì)中，文本是重要的組成部分，那么在網(wǎng)絡(luò)拓?fù)鋱D中也是一樣的，文本在網(wǎng)絡(luò)拓?fù)鋱D上最基本的顯示功能之一，在不同的應(yīng)用場(chǎng)景下，會(huì)有不同的需求。但是不同的需求也逃不過(guò)一些基礎(chǔ)設(shè)置，如位置、旋轉(zhuǎn)、字體、顏色等需求。接下來(lái)我們就來(lái)詳細(xì)聊聊 HT for Web 中文本的相關(guān)應(yīng)用。
HT for Web 為網(wǎng)絡(luò)拓?fù)鋱D上的節(jié)點(diǎn)提供了兩個(gè)文本，也確實(shí)需要兩個(gè)文本同時(shí)存在的情況，比如車(chē)站上面的站牌，就有漢字和拼音的組合，如果做一個(gè)公交站示意圖的話(huà)，節(jié)點(diǎn)上的兩個(gè)文本就都用得上了。今天就模擬一個(gè)地鐵站點(diǎn)和大家一起聊聊網(wǎng)絡(luò)拓?fù)鋱D上的文本應(yīng)用。
今天拿來(lái)說(shuō)明的 Demo 鏈接：http://www.hightopo.com/demo/...
從上圖可以看出，文本有各種各樣的需求，有可能還有其他更復(fù)雜的需求，在這邊我就抽取幾種需求來(lái)具體描述下，那我們一步一步來(lái)調(diào)效果，先從廈門(mén)這個(gè)站點(diǎn)開(kāi)始吧。
- node.s({
- 'label': '廈門(mén)',
- 'label2': 'Xiamen'
- });
網(wǎng)絡(luò)拓?fù)鋱D的創(chuàng)建及節(jié)點(diǎn)的創(chuàng)建我這邊就不再多描述了，我們直奔主題，先設(shè)置 Node 上面的兩個(gè)文本看看效果。
如上圖，可以發(fā)現(xiàn)連個(gè)文本是在 Node 上不同的位置，顯然這樣子不是我們想要的效果，那文本的位置又該怎么去定義呢?這時(shí)就需要移步到我們的《位置手冊(cè)》(http://www.hightopo.com/guide...)來(lái)了解相關(guān)的設(shè)置及含義。在我們的風(fēng)格手冊(cè)中的 ht.Style 章節(jié)有描述 label 和 label2 的位置默認(rèn)值，label.position 的默認(rèn)值是 31，label2.position 的默認(rèn)值是 34，在位置手冊(cè)中找到兩個(gè) label 需要擺放的位置，然后設(shè)置到 Node 上就可以了。那么根據(jù)前面總體效果圖中的廈門(mén)站點(diǎn)，可以發(fā)現(xiàn)兩個(gè) label 的位置都是在中下方，所以?xún)蓚€(gè) lable 的 position 都應(yīng)該設(shè)置為 31，當(dāng)設(shè)置兩個(gè)文本的 position 都為 31 的話(huà)，會(huì)發(fā)現(xiàn)連個(gè)文本是重疊的，這肯定不是我們想要的效果。仔細(xì)閱讀風(fēng)格手冊(cè)，會(huì)發(fā)現(xiàn)連個(gè) label 都有 offset.x 和 offset.y 連個(gè)屬性，這兩個(gè)屬性很好理解，就是用來(lái)設(shè)置文本的偏移值的。
- node.s({
- 'label': '廈門(mén)',
- 'label2': 'Xiamen',
- 'label2.position': 31,
- 'label2.offset.y': 15
- });
我們對(duì) label2 設(shè)置了 position 屬性為 31，和 label 的 position 屬性默認(rèn)值一樣，并且設(shè)置了 label2 的 offset.y 屬性，讓 label2 向下便宜 15 個(gè)像素。
上圖的文本位置看起來(lái)舒服多了，但是感覺(jué)還是不對(duì)，沒(méi)有主次之分，是不是應(yīng)該將 label 的文本大小設(shè)置大一點(diǎn)，別讓拼音搶了風(fēng)頭，兩個(gè)文本都有 font 屬性可以設(shè)置，而且默認(rèn)值都是 12px arial, sans-serif。
- node.s({
- 'label': '廈門(mén)',
- 'label.font': '22px arial, sans-serif',
- 'label2': 'Xiamen',
- 'label2.position': 31,
- 'label2.offset.y': 23
- });
我們將 label 的 font 屬性適當(dāng)?shù)刂v字體調(diào)大了，自然 label2 的偏移值也需要做些調(diào)整，不然兩個(gè)文本就又疊在一起了。
上圖的效果看著順眼多了。
看上圖，我們又多搞了幾個(gè) label 樣式，和前面的 label 參數(shù)差不多，就中間的兩個(gè)文本樣式多了個(gè) rotation，還有一個(gè)文本換行。
- 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': '廈門(mén)',
- '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
- });
從上面的代碼可以看到，在“圖撲”和“上海”兩個(gè)節(jié)點(diǎn)的 label 都加了“n”回車(chē)轉(zhuǎn)義字符，在 HT 的內(nèi)部實(shí)現(xiàn)中，有對(duì)“n”回車(chē)轉(zhuǎn)義字符做解析處理，讓文本在表現(xiàn)上可以換行顯示。
***就是站點(diǎn)之間的連線(xiàn)處理了，連線(xiàn)可以通過(guò)設(shè)置 Edge 的樣式 edge.points 和 edge.segments 兩個(gè)屬性來(lái)實(shí)現(xiàn)，在我們的《入門(mén)手冊(cè)》(http://www.hightopo.com/guide...)中有說(shuō)明其具體用法，可以一步閱讀，這不是今天的重點(diǎn)，在這邊就不詳細(xì)說(shuō)明了。
- 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);
如上代碼，通過(guò) Edge 將節(jié)點(diǎn)連接起來(lái)，并設(shè)置其 edge.points 和 edge.segments 兩個(gè)樣式，從而達(dá)到文章開(kāi)頭的示意圖那樣的效果，當(dāng)然站點(diǎn)也是需要設(shè)置到相應(yīng)的位置。在這邊需要注意的是，edge.points 屬性是沒(méi)有包含起點(diǎn)和終點(diǎn)的，所以，你可以看到上圖中的代碼，按照 edge.segments 屬性計(jì)算出來(lái)的點(diǎn)個(gè)數(shù)和 edge.points 的數(shù)組個(gè)數(shù)是不一樣的，而且總是相差 2。
雖然源碼不長(zhǎng)，但是由于篇幅的原因，這里就不貼源碼了，感興趣的同學(xué)可以到我們的官網(wǎng)上查看 Demos 的源碼，Demo 的具體鏈接如下：http://www.hightopo.com/demo/...
