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;level<rings.length; level++){
        var ring=rings[level];
        for(var index=0;index<ring.length;index++){
          var node=ring[index];   
          x1=x1 ? Math.min(x1, node.getLocation().x) : node.getLocation().x;
          y1=y1 ? Math.min(y1, node.getLocation().y) : node.getLocation().y;
          x2=x2 ? Math.max(x2, node.getLocation().x) : node.getLocation().x;
          y2=y2 ? Math.max(y2, node.getLocation().y) : node.getLocation().y;
 
          var target=box.getDatas().get(Math.floor(Math.random()*box.size()));
          if(target instanceof twaver.Node && target!==node){
            var connection=new twaver.Link(node, target);
            connection.setStyle('link.width',0.2);
            connection.setStyle('link.color', '#aaaaaa');
            connection.setClient('connection',true);
            connection.setClient('angle', (target.getClient('angle')+node.getClient('angle'))/2);
            box.add(connection);
          }
        }
      }
      var width=x2-x1;
      var height=y2-y1;           
 
      //layout each ring for this group.
      for(var level=0;level<rings.length; level++){
        var ring=rings[level];
        for(var index=0;index<ring.length;index++){
          var node=ring[index];   
          var radius=node.getLocation().y-y1;
          var range=Math.PI*2;        
          var angle=(node.getLocation().x-x1)/width * range;
          if(level>1 && (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();      
   }

 

如果有對這個示例感興趣的朋友，可以發郵件索取相關代碼，郵箱地址：[e-mail]