JS绘制拓扑图示例 （JTopo）
目前在做的项目是渔政的监控，需要用到的设备包括雷达，光电，站点信息等，想要更直观的展现设备之间的连接关系和状态信息，这时候需要画一张拓扑图
在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas>
<canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘图能力的，真正形成图形，还是需要通过脚本语言去绘制
知道了这个标签的含义及用法之后，开始网络拓扑图的绘制
首先找到一个开源且免费的拓扑图形包，Jtopo，前面我写了一个JTopo的使用心得，里面写了两个示例，基本上就可以完成这次拓扑图的设计，我将步骤拆分一下：
首先加载场景：
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene();
编写两个函数，用来定义Node和Link的属性，传入参数即可生成节点：
//定义生成节点函数
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;
}
然后根据需求生成节点连接即可，效果如下图所示：
完整代码如下：
<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=" background-color:#EEEEEE; border:1px solid #444;">
</canvas>
</body>
</html>
2017.9.19日更新：
我写页面一般是用JS写，CSS渲染,在JSP页面中加载，使用过程中发现一个问题，就是给canvas设置属性时，无论是通过CSS渲染还是直接通过style属性添加，JTopo都会出现bug，图像失真且无法拖动，所以建议如果通过JS来编写页面的前端同事，直接通过对象.height/width属性来添加，末尾也无需添加"px“字符串
