在前端网页设计中，文字是重要的组成部分，所以在网络拓扑图中同样如此，文字在网络拓扑上最基本的展示功能之一map，在不同的应用场景下有不同的需求。但是不同的需求都逃不过一些基本的设置，比如位置、旋转、字体、颜色等需求。下面详细说说文本在HTforWeb中的相关应用。HTforWeb为网络拓扑图上的节点提供了两种文本，两种文本同时存在是事实。例如，车站的站牌是汉字和拼音的组合。如果您制作公交车站图，节点上的两个文本都可以使用。今天就模拟一个地铁站，和大家聊聊网络拓扑图上的文字应用。今天讲解的demo链接：http://www.hightopo.com/demo/...从上图可以看出，文中有各种要求，可能还有其他更复杂的要求。这里我将几个需求提炼出来详细描述一下，然后我们一步步调整效果，先从厦门站点说起。node.s({'label':'厦门','label2':'厦门'});网络拓扑图的创建和节点的创建这里不再赘述。直接进入正题，先搭建Node。看上面两段文字的效果。如上图所示，我们可以发现两个文本在Node上的位置不同。显然，这不是我们想要的效果，那么如何定义文字的位置呢？这时候就需要移步我们的《位置手册》(http://www.hightopo.com/guide...)了解相关设置和含义。我们样式手册中的ht.Style章节描述了label和label2位置的默认值。label.position默认值为31，label2.position默认值为34。在position手册中，两个label需要放置position，然后设置到Node。那么根据之前整体效果图中的厦门站点可以发现，两个标签的位置都在中间和底部，所以这两个标签的位置应该设置为31。两个文本都设置为31，你会发现即使是两个文本也是重叠的，这肯定不是我们想要的效果。如果你仔细阅读样式手册，你会发现即使是标签也有属性offset.x和offset.y。这两个属性比较容易理解，用来设置文本的偏移值。node.s({'label':'厦门','label2':'厦门','label2.position':31,'label2.offset.y':15});我们将label2的position属性设置为31，与label的position属性的默认值相同，并设置label2的offset.y属性，使label2降低15个像素。上图的文字位置看起来舒服多了，但还是感觉不对。没有主次之分。标签的文字大小是不是应该设置大一些，以免让拼音抢了风头？两种文字都有可以设置的字体属性，默认值为12pxarial,sans-serif。node.s({'label':'厦门','label.font':'22pxarial,sans-serif','label2':'厦门','label2.position':31,'label2.offset.y':23});我们适当增加标签的字体大小。自然也需要调整label2的offset值，否则两个文本又会重叠。上图的效果看起来顺眼多了。看上图，我们又增加了几个标签样式，和前面的标签参数差不多，只是中间的两个文字样式有旋转和文字环绕。varlist=[],node;for(vari=0;i<4;i++){node=newht.Node();node.setImage('station');node.p(100+i*100,100);dm。add(node);list.push(node);}node=list[0];node.s({'label':'厦门','label.font':'22pxarial,sans-serif','label2':'厦门','label2.position':31,'label2.offset.y':23});node=list[1];node.s({'label':'Figure\nflutter','label.position':14,'label.font':'22pxarial,sans-serif','label2':'Hightopo','label2.position':14,'label2.offset.x':-7,'label2.rotation':-Math.PI/2});node=list[2];node.s({'label':'上海','label.position':20,'label.font':'22pxarial,sans-serif','label2':'Shanghai','label2.position':20,'label2.offset.x':6,'label2.rotation':-Math.PI/2});node=列表[3];node.s({'label':'北京','label.position':3,'label.font':'22pxarial,sans-serif','label2':'北京','label2.position':3,'label2.offset.y':-23});从上面的代码可以看出，“图浦”和“上海”这两个节点的标签都加了“n”。在HT内部实现中，解析了“n”回车转义符，使得文本可以换行显示。***这是站点之间的连接。连接可以通过设置Edge样式的edge.points和edge.segments属性来实现。/guide...)解释了它的具体用法，大家可以一步一步看，这不是今天的重点，这里就不详细解释了。varbj_sh=newht.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);varsh_xm=newht.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);varxm_tp=newht.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/...
