网络拓扑图上文本的巧妙应用

在前端网页设计中，文本是重要的组成部分，那么在网络拓扑图中也是同样的，文本在网络拓扑图上最基本的显示功能之一，在不一样的应用场景下，会有不一样的需求。可是不一样的需求也逃不过一些基础设置，如位置、旋转、字体、颜色等需求。接下来咱们就来详细聊聊 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