拓扑框架Jtopo

Posted 2020-09-26 corolcorona

使用html5制作网络拓扑图的方式有主要有Canvas和SVG，Jtopo采用HTML5的Canvas实现，可以使用到Html5的平台(PC，手机，平板)，免费易用，适用于浏览器IE, Firefox, Safari,Chrome等

开发流程：
1.引入jtopo.js文件

<script type="text/javascript" src="js/jtopo-min.js"></script>

 

2.Canvas标签定义拓扑图

<canvas width="910" height="400" id="canvas"></canvas>

 

3.绘制拓扑图

$(document).ready(function(){ 
var canvas = document.getElementById(‘canvas‘);
var stage = new JTopo.Stage(canvas);//创建舞台对象
var scene = new JTopo.Scene(stage); //创建场景对象 
scene.alpha = 1;


//加节点
function addNode(text, color){
var node = new JTopo.Node();
node.setImage(‘./img/topo/‘+ color +‘.png‘, true);
node.fontColor = ‘0,0,0‘;
scene.add(node);

node.mouseover(function(){
this.text = text;
});
node.mouseout(function(){
this.text = null;
});
return node;
}


//连线
function addLink(nodeA, nodeZ){
var link = new JTopo.FlexionalLink(nodeA, nodeZ);
link.strokeColor = ‘204,204,204‘;
link.lineWidth = 1;
scene.add(link);
return link;
}

var rootNode = addNode(‘root‘, ‘gray‘);

var icons = [‘green‘, ‘blue‘, ‘red1‘, ‘red2‘];
for(var i=0; i<icons.length; i++){

var node = addNode(‘second_‘ + i, icons[i]); 
addLink(rootNode, node); 
if(i == 0 || i == icons.length - 1){
for(var j=0; j<4; j++){
var thirdNode = addNode(‘third_‘ + j, ‘green‘);
addLink(node, thirdNode);

}
}
}

// 树形布局
scene.doLayout(JTopo.layout.TreeLayout(‘down‘, 30, 107));
});

更多实例官网中都有