自己实现JTopo插件的圆形布局

来源：互联网发布：一个淘宝号能刷几单编辑：程序博客网时间：2024/06/12 00:08

JTopo有自己的圆形布局，只需要调用一下圆形布局的方法即可。我自己粗糙的也算实现了一个圆形布局吧。比较简单：以x轴正方向为0度，然后计算出每个节点连线的角度，因为半径是固定的，根据半径和角度便可以计算出每个节点的X和Y坐标。

//创建普通节点function createNode(x,y){            var node = new JTopo.CircleNode('circle');            node.fillStyle = '200,255,0';            node.radius = 15;            node.setLocation(x , y);            scene.add(node);                                            var link = new JTopo.Link(cloudNode, node);            scene.add(link);        }//初始化画布var canvas =document.getElementById('canvas');var stage = new JTopo.Stage(canvas);scene = new JTopo.Scene(stage);scene.alpha = 1;var cloudNode = new JTopo.Node('root');cloudNode.setSize(30, 26);cloudNode.setLocation(360,230);            scene.add(cloudNode);var data = {    x:560,    y:230,    radius:200  //固定的半径   }var length = 8; //模拟创建几个节点var num = 360/length;for(var i = 1; i < length; i++){   var angle = i * num;   //判断节点所在的区域   if(angle < 90 || angle > 270){    var diff = 90 - angle;    if(diff > 0){           //1       var nodey = Math.sin(angle * (Math.PI/180));       var nodex = Math.cos(angle * (Math.PI/180));       createNode(nodex,nodey);    }else{  //4           var nodey = Math.sin((360-angle) * (Math.PI/180));           var nodex = Math.cos((360-angle) * (Math.PI/180));           createNode(nodex,nodey);        }     }else{       var diff = 180 - angle;       if(diff > 0){            //2           var nodey = Math.sin(diff * (Math.PI/180));           var nodex = Math.cos(diff * (Math.PI/180));           createNode(nodex,nodey);            }else{           diff = angle -180;   //3           var nodey = Math.sin(diff * (Math.PI/180));           var nodex = Math.cos(diff * (Math.PI/180));           createNode(nodex,nodey);        }  } }  //固定的x轴的节点var node = new JTopo.CircleNode('host');node.fillStyle = '200,255,0';node.radius = 15;node.setLocation(560,230);       scene.add(node);                                var link = new JTopo.Link(cloudNode, node);scene.add(link);JTopo.layout.layoutNode(scene, cloudNode, true);

8个节点的效果如图：
这里写图片描述

0 0