TWaver HTML5之树形布局

阅读更多

转眼间春节假期已经过完，作为一个职业的程序猿，不知道大家有没有这样的感觉，一天不碰电脑，总觉得生活少点什么。今天是春节后上班的第三天，给大家分享一下我们前段时间的一个需求，需求是这样的：界面中的网元分为不同的域，比如一级域，二级域，三级域，….N级域，而且不同域之间会有连线。对于这个需求，按照常规的想法，使用group岂不是很简单，一级域是一个group，二级域也是一个group，二级域的group是一级域的父亲，以此类推。但是这样有个问题，如果域比较多，会造成group的过度嵌套，界面中group多了之后，不仅用户体验下降，而且会严重影响性能，所以倒不如直接用树，可以很直观的体现各个域之间的层级关系。

下面是布局的代码，代码很简单，相信熟悉twaver的人很容易看懂。

function layoutRing(){    
    //setup all group rings.
    var groups={};    
    box.forEach(function(data){
      if(data instanceof twaver.Node){
        var node=data;
        node.setClient('x', node.getLocation().x);
        node.setClient('y', node.getLocation().y);
        var groupName=data.getClient('group');
        if(!groups[groupName]){
          groups[groupName]=[];
        }
        var rings=groups[groupName];
        var level=parseInt(node.getClient('level'));
        if(rings.length<=level){
          rings.push([]);
        }
        var ring=rings[level];
        ring.push(node);
      }
    });
 
    cleanConnections();
    layouter.doLayout('topbottom');   
     
    for(var groupName in groups){
      //get this group bounds.
      var x1=undefined, y1=undefined, x2=undefined, y2=undefined;
      var rings=groups[groupName];
      for(var level=0;level1 && (level==rings.length-1 || rings.length<4)){
            angle=node.getParent().getClient('angle')+(angle-node.getParent().getClient('angle'))/3;
          }
          var x=radius*Math.cos(angle);
          var y=radius*Math.sin(angle);
                   
          node.setLocation(node.getClient('x'),node.getClient('y'));
          node.setClient('angle', angle);                     
          move(node, x, y);
        }
      }
    }   
   }

 

布局中的可以加入动画效果，提升用户体验，关于动画的相关文档可以参考文档：

 

 

function move(node, x, y){
    var x0=node.getClient('x');
    var y0=node.getClient('y');
    new twaver.Animate({
          from: { x: x0, y: y0 },
          to: { x: x, y: y },
          type: 'point',
          delay: 100,
          dur: 1000,
          easing: 'easeNone',
          onUpdate: function (value) {
            node.setLocation(value.x, value.y);
          }
        }).play();      
   }

 

 

如果有对这个示例感兴趣的朋友，可以发邮件索取相关代码，邮箱地址：[email protected]