JTopo 使用

Posted 2020-10-03 希望十年后，我们都能活成我们喜欢的样子

1. 下载JTopo js http://www.jtopo.com/download.html

2. 引入js文件，引入jtopo之前引入jQuery

3. JTopo Demo -- 圆形布局

步骤：  获取canvas ——> 创建stage ——> 创建scene添加的stage ——> 创建节点添加到scene

$(document).ready(function(){                    
            var canvas = document.getElementById(‘canvas‘);
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            var scene = new JTopo.Scene();
            stage.add(scene);
            scene.background = ‘./img/bg.jpg‘;
            
            var cloudNode = new JTopo.Node(‘root‘);
            cloudNode.setSize(30, 26);
            cloudNode.setLocation(360,230);            
            cloudNode.layout = {type: ‘circle‘, radius: 150};
            
            scene.add(cloudNode);
            
            for(var i=1; i<4; i++){
                var node = new JTopo.CircleNode(‘host‘ + i);
                node.fillStyle = ‘200,255,0‘;
                node.radius = 15;
                node.setLocation(scene.width * Math.random(), scene.height * Math.random());
                node.layout = {type: ‘circle‘, radius: 80};
                
                scene.add(node);                                
                var link = new JTopo.Link(cloudNode, node);
                scene.add(link);
                
                for(var j=0; j<6; j++){
                    var vmNode = new JTopo.CircleNode(‘vm-‘ + i + ‘-‘ + j);
                    vmNode.radius = 10;
                    vmNode.fillStyle = ‘255,255,0‘;
                    vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                    scene.add(vmNode);                                
                    scene.add(new JTopo.Link(node, vmNode));                            
                }
            }
            JTopo.layout.layoutNode(scene, cloudNode, true);
            
            scene.addEventListener(‘mouseup‘, function(e){
                if(e.target && e.target.layout){
                    JTopo.layout.layoutNode(scene, e.target, true);    
                }                
            });
        }); 

 

4. 总结的问题：

　　1. 关于node的layout，目前我知道有 tree，circle 两种，用法如下： 

         node.layout = {type: ‘tree‘, direction: direction, width: 180, height: 80};

　　2. 关于container，也就是分组容器。container需要添加到scene中，container中添加node，需要将node添加到container以及scene中。例子如下：

var stage;
        $(document).ready(function(){
            var canvas = document.getElementById(‘canvas‘);            
            stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            var scene = new JTopo.Scene();
            scene.background = ‘./img/bg.jpg‘;
            stage.add(scene);
            
            // 不指定布局的时候，容器的布局为自动(容器边界随元素变化）
            var container = new JTopo.Container(‘边界自动变化‘);
            container.textPosition = ‘Middle_Center‘;
            container.fontColor = ‘100,255,0‘;
            container.font = ‘18pt 微软雅黑‘;
            container.borderColor = ‘255,0,0‘;
            container.borderRadius = 30; // 圆角
            scene.add(container);
            
            for(var i=0; i<5; i++){
                var node = new JTopo.Node("A_"+i);    
                node.textPosition = "Middle_Center";
                node.setLocation(300+ Math.random() * 300, 200+ Math.random() * 200);
                scene.add(node);
                container.add(node);
            }
            scene.add(new JTopo.Link(container.childs[0], container.childs[1]));
            scene.add(new JTopo.Link(container.childs[2], container.childs[3]));
            
            // 流式布局（水平、垂直间隔均为10)
            var flowLayout = JTopo.layout.FlowLayout(10, 10);
            
            // 网格布局(4行3列)
            var gridLayout = JTopo.layout.GridLayout(4, 3);
            
            var container2 = new JTopo.Container(‘点击切换布局‘);
            container2.layout = flowLayout;
            container2.fillColor = ‘10,10,100‘;
            container2.setBound(10, 10, 300, 200);            
            scene.add(container2);
            
            for(var i=0; i<12; i++){
                var node = new JTopo.Node("F_" + i);    
                node.textPosition = "Middle_Center";
                scene.add(node);
                container2.add(node);
            }
            
            container2.click(function(){
                if(container2.layout === flowLayout){
                    container2.layout = gridLayout;
                }else{
                    container2.layout = flowLayout;
                }
            });
        });

View Code

 

　　3.关于link的样式：

简单连线	Link
折线	FoldLink
二次折线	FlexionalLink
曲线	CurveLink

还在探索中，持续更新。。。