写文章

jtopo制作拓扑图学习。

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>

 

posted @ 2020-08-13 23:13  AnthonyWang  阅读(647)  评论(0)    收藏  举报