拓扑图框架Jtopo

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


开发流程:

1.引入jtopo.js文件



2.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


 







你可能感兴趣的:(拓扑图框架Jtopo)