jtopo公网：http://www.jtopo.com/api.html#
在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas>
<canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘图能力的，真正形成图形，还是需要通过脚本语言去绘制
知道了这个标签的含义及用法之后，开始网络拓扑图的绘制
首先找到一个开源且免费的拓扑图形包，Jtopo，前面我写了一个JTopo的使用心得，里面写了两个示例，基本上就可以完成这次拓扑图的设计，我将步骤拆分一下：
首先加载场景：
|
1
2
3
|
var canvas = document.getElementById(\'canvas\');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene();
|
编写两个函数，用来定义Node和Link的属性，传入参数即可生成节点：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//定义生成节点函数 function node(x, y, img,name,height,width){
var node = new JTopo.Node(name);
node.setImage(\'img/control/\' + img, true);
node.setLocation(x, y);
node.setSize(height,width);
scene.add(node);
return node;
}
//定义连线函数
function linkNode(nodeA, nodeZ,color){
var link = new JTopo.FoldLink(nodeA, nodeZ);
link.lineWidth = 3;
link.strokeColor = color;
scene.add(link);
return link;
}
|
然后根据需求生成节点连接即可，效果如下图所示：
完整代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<html><head> <title>Demo</title>
<meta charset="UTF-8">
<link href="css/jquery.snippet.min.css">
<script type="text/javascript" src="htforweb/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="htforweb/jquery.js"></script>
<script type="text/javascript" src="htforweb/jquery.snippet.min.js"></script>
<script type="text/javascript" src="htforweb/jtopo-min.js"></script>
</head><body><script> //动态生成拓扑图
$(document).ready(function(){
var canvas = document.getElementById(\'canvas\');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene();
//定义生成节点函数
function node(x, y, img,name,height,width){
var node = new JTopo.Node(name);
node.setImage(\'img/control/\' + img, true);
node.setLocation(x, y);
node.setSize(height,width);
scene.add(node);
return node;
}
//定义连线函数
function linkNode(nodeA, nodeZ,color){
var link = new JTopo.FoldLink(nodeA, nodeZ);
link.lineWidth = 3;
link.strokeColor = color;
scene.add(link);
return link;
}
var r1 = node(40, 40,\'satellite_antenna.png\',\'XX站\',50,30);
var r2 = node(40, 110, \'satellite_antenna.png\',\'XX站\',50,30);
var r3 = node(40, 180,\'satellite_antenna.png\',\'XX站\',50,30);
var r4 = node(40, 300,\'satellite_antenna.png\', \'XX站\',50,30);
var r5 = node(40, 370,\'satellite_antenna.png\',\'XX站\',50,30);
var r6 = node(40, 440,\'satellite_antenna.png\',\'XX站\',50,30);
var r7 = node(200, 350,\'terminal.png\',\'XX分中心\',50,70);
var r8 = node(400, 270, \'nation.png\',\'南京中心\', 900,400);
linkNode(r1, r8,\'26,191,94\');
linkNode(r2, r8,\'206,8,101\');
linkNode(r3, r8,\'26,191,94\');
linkNode(r4, r7,\'26,191,94\');
linkNode(r5, r7,\'26,191,94\');
linkNode(r6, r7,\'26,191,94\');
linkNode(r7, r8,\'26,191,94\');
var r9 = node(600, 50, \'host.png\',\'XX局\',60,40);
var r10 = node(600, 110, \'host.png\',\'XX局\',60,40);
var r11 = node(600, 170, \'host.png\',\'XX局\',60,40);
var r12 = node(600, 230,\'host.png\', \'XX局\',60,40);
var r13 = node(600, 290,\'host.png\', \'XX局\',60,40);
var r14 = node(600, 350, \'host.png\',\'XX局\',60,40);
var r15 = node(600, 410, \'host.png\',\'XX局\',60,40);
linkNode(r9, r8,\'26,191,94\');
linkNode(r10, r8,\'26,191,94\');
linkNode(r11, r8,\'26,191,94\');
linkNode(r12, r8,\'26,191,94\');
linkNode(r13, r8,\'26,191,94\');
linkNode(r14, r8,\'26,191,94\');
linkNode(r15, r8,\'26,191,94\');
stage.add(scene);
});
</script> <canvas width="1000" height="800" id="canvas" style=" border:1px solid #444;">
</canvas>
</body></html> |