目前在做的項目是漁政的監控，需要用到的設備包括雷達，光電，站點信息等，想要更直觀的展現設備之間的連接關系和狀態信息，這時候需要畫一張拓撲圖
在做拓撲圖之前，首先要學習一下，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“字符串