Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use html5 to realize the text on the network topology diagram". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use html5 to realize the text on the network topology diagram.

As can be seen from the above picture, the text has a variety of requirements, and there may be other more complex requirements. Here, I will extract several requirements to describe them in detail. Let's adjust the effect step by step, starting with Xiamen.

Node.s ({'label':' Xiamen', 'label2':' Xiamen'})

The creation of the network topology diagram and the creation of nodes will not be described any more here. Let's go straight to the topic and first set up the two texts above Node to see the effect.

As shown in the figure above, we can find that even the text is in a different location on the Node. Obviously, this is not the effect we want, so how to define the location of the text? At this point, we need to move to our location manual (http://www.hightopo.com/guide...)) To understand the relevant settings and meaning. The ht.Style section in our style manual has location defaults that describe label and label2. The default value for label.position is 31 label. The default value for label2.position is 34. Find the locations where the two label2.positions need to be placed in the location manual and set them to Node. Then according to the Xiamen site in the previous overall effect image, you can find that the positions of both label are in the lower middle, so the position of both lable should be set to 31. When you set the position of both texts to 31, you will find that even texts overlap, which is certainly not the effect we want. If you read the style manual carefully, you will find that even a label has offset.x and offset.y attributes, which are easy to understand and are used to set the offset value of the text.

Node.s ({'label':' Xiamen', 'label2':' Xiamen', 'label2.position': 31,' label2.offset.y': 15})

We set the position property to 31 for label2, which is the same as the default for the position property of label, and set the offset.y property for label2 to make label2 15 pixels cheaper.

The text position in the image above looks much more comfortable, but it still doesn't feel right. There is no distinction between primary and secondary. Should you set the text size of label a little larger, so as not to let Pinyin steal the limelight? both texts have font attributes that can be set, and the default values are 12px arial and sans-serif.

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

We enlarged the font properly with the font attribute of label, and naturally the offset value of label2 needs to be adjusted, otherwise the two texts will be stacked on top of each other again.

The effect of the above picture looks much more pleasing to the eye.

Looking at the figure above, we have made a few more label styles, which are similar to the previous label parameters, with a rotation for the two text styles in the middle, and a text line break.

Var list = [], node; for (var I = 0; I < 4; iTunes +) {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':' Xiamen', 'label.font':' 22px arial, sans-serif', 'label2':' Xiamen', 'label2.position': 31,' label2.offset.y': 23}); node = list [1] Node.s ({'label':' figure\ nPop', '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':' Shanghai', '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':' Beijing', 'label.position': 3,' label.font': '22px arial, sans-serif',' label2': 'Beijing',' label2.position': 3, 'label2.offset.y':-23})

As can be seen from the above code, "n" carriage return escape characters are added to the label of "Tupu" and "Shanghai" nodes. In the internal implementation of HT, the "n" carriage return escape characters are parsed so that the text can be displayed on a new line.

* is to deal with the connection between sites, which can be achieved by setting the style edge.points and edge.segments attributes of Edge. In our "getting started Manual" (http://www.hightopo.com/guide...)) There is a description of its specific usage, which can be read in one step, which is not the focus of today and will not be explained in detail here.

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,150}, {x: 200,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,400}],' edge.segments': [1,4]}); dm.add (xm_tp)

As in the above code, connect the nodes through Edge, and set their edge.points and edge.segments styles, so as to achieve the effect of the diagram at the beginning of the article, of course, the site also needs to be set to the appropriate location. It should be noted here that the edge.points attribute does not contain the start and end points, so you can see the code in the figure above. The number of dots calculated according to the edge.segments attribute is not the same as the array number of edge.points, and there is always a difference of 2.

At this point, I believe you have a deeper understanding of "how to use html5 to achieve the text on the network topology diagram". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.