In front-end web design, text is an important part, so it is the same in the network topology diagram. Text is one of the most basic display functions on the network topology diagram. In different application scenarios, there will be different requirements. However, different requirements cannot escape some basic settings, such as position, rotation, font, color and other requirements. Next, let's talk about the application of text in HT for Web in detail.
HT for Web provides two texts for nodes on the network topology map, and it is true that two texts exist at the same time. For example, the stop sign above the station has a combination of Chinese characters and pinyin. If you make a schematic diagram of a bus station, Both texts on the node are used. Today, I will simulate a subway station and talk with you about the text application on the network topology map.
The Demo link used to illustrate today: http://www.hightopo.com/demo/label/index.html
As can be seen from the above figure, the text has various requirements, and there may be other more complex requirements , Here I will extract several requirements to describe in detail, then we will adjust the effect step by step, starting with the Xiamen site.
Js code Collection code
node.s({
'label': 'Xiamen',
'label2': 'Xiamen'
});
I will not describe the creation of the network topology map and the creation of nodes here, let's go straight to the topic , first set the two texts above Node to see the effect.
As shown in the figure above, it can be found that the two texts are in different positions on the Node. Obviously, this is not the effect we want. How to define the position of the text? At this time, you need to move to our "Position Manual" (http://www.hightopo.com/guide/guide/core/position/ht-position-guide.html) to understand the relevant settings and meanings. The ht.Style chapter in our style manual describes the default values of label and label2. The default value of label.position is 31, and the default value of label2.position is 34. Find two labels in the position manual that need to be placed The location, and then set to Node on it. Then according to the Xiamen site in the previous overall rendering diagram, it can be found that the positions of the two labels are in the middle and bottom, so the positions of the two labels should be set to 31. When the positions of the two texts are set to 31, you will find that Even the text is overlapping, which is definitely not what we want. Carefully read the style manual, you will find that even a label has offset.x and offset.y attributes. These two attributes are well understood and are used to set the offset value of the text.
Js code Collection code
node.s({
'label': 'Xiamen',
'label2': 'Xiamen',
'label2.position': 31,
'label2.offset.y': 15
});
we set label2 The position property is 31, which is the same as the default value of the label's position property, and sets the offset of label2.
The text position in the picture above looks more comfortable, but it still feels wrong. There is no priority. Should the text size of the label be set larger, so as not to let Pinyin steal the limelight, both texts have font properties that can be set , and the default values are 12px arial, sans-serif.
Js code Collection code
node.s({
'label': 'Xiamen',
'label.font': '22px arial, sans-serif',
'label2': 'Xiamen',
'label2.position': 31,
'label2 .offset.y': 23
});
We appropriately increase the font of the label's font property. Naturally, the offset value of label2 also needs to be adjusted, otherwise the two texts will be stacked together again.
The effect of the picture above looks much more pleasing to the eye.
Looking at the picture above, we have added a few more label styles, which are similar to the previous label parameters, except that the two text styles in the middle have an additional rotation and a text wrap.
Js code Favorite code
var list = [], node;
for (var i = 0; i < 4; i++) {
node = nhttp://www.lieju.com/u323087
http://www.lieju.
http://www.lieju.com/u323758
http://www.lieju.com/u323963
http://www.lieju.com/u324178
http://www.lieju.com/u324343
http://www.lieju.com/u324775
http://www.lieju.com/u325118ew 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': 'Figure\n flutter',
'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'http://www.ikuku.cn/user/43351
http://www.ikuku.cn/user/43353
http://www.ikuku.cn/user/43354
http://www.ikuku.cn/user/43357
http://www.ikuku.cn/user/43358
http://www.ikuku.cn/user/43359
http://www.ikuku.cn/user/43360
http://www.ikuku.cn/user/43361
http://www.ikuku.cn/user/43362
http://www.ikuku.cn/user/43364
http://www.ikuku.cn/user/43365
http://www.ikuku.cn/user/43366: '上\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
});
As can be seen from the above code, "\n" carriage return escape characters are added to the labels of the two nodes "Tupu" and "Shanghai". In the internal implementation of HT, there is a carriage return for "\n" Escape characters are parsed so that the text can be displayed on a new line.
Finally, the connection between the sites is processed. The connection can be realized by setting the Edge's style edge.points and edge.segments. In our "Getting Started Manual" (http://www.hightopo.com/ guide/guide/core/beginners/ht-beginners-guide.html#ref_styleedge) has explained its specific usage, you can read it step by step, this is not the focus of today, so I won't explain it in detail here.
Js code Collection code
var bj_sh = new ht.Edge(bj, sh);
bj_sh.s(cloneObj(edgeStyle, {
'edge.poihttp://www.7360.cc/Company-2935399
http://www.7360. cc/Company-2935400
http://www.7360.cc/Company-2935401
http://www.7360.cc/Company-2935402
http://www.7360.cc/Company-2935403
http://www. 7360.cc/Company-2935404
http://www.7360.cc/Company-2935405
http://www.7360.cc/Company-2935406
http://www.7360.cc/Company-2935407
http:// www.7360.cc/Company-2935408nts': [
{ 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);
As the above code, connect the nodes through Edge, and set the two styles of edge.points and edge.segments, so as to achieve the effect of the schematic diagram at the beginning of the article, of course, the site also needs to be set to the corresponding location. It should be noted here that the edge.points property does not contain the start and end points, so you can see the code in the above figure, the number of points calculated according to the edge.segments property and the array of edge.points The numbers are not the same and always differ by 2.
As above code, connect nodes through Edge and set their edge.points and edge.segments
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326644232&siteId=291194637
Recommended
Ranking