在TWaver的Tree节点上画线

论坛上有同学提出如何在tree上画引导线，之前我们Flex已经实现此功能，现在最新版的HTML5也将添加此功能。先看看效果：


详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章，下面贴出一个Demo，没有图标，没有框选。仅供参考：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

TreeLineDemo<script src="../twaver.js"></script> <script> <![CDATA[     varbox=newtwaver.ElementBox();     vartree=newtwaver.controls.Tree(box);       functioninit(){         initTreeView();         initDataBox();     }       functioninitTreeView(){         vartreeDom=tree.getView();         treeDom.style.width="100%";         treeDom.style.height="100%";         document.body.appendChild(treeDom);           tree.setLineType('solid');//solid,dotted,none         tree.setLineColor('#000000');         tree.setLineAlpha(1);         tree.setLineThickness(2);     }       functioninitDataBox(){         vargroup=newtwaver.Group();         group.setName('Group');         group.setIcon(null);         box.add(group);           for(vari=0;i<2;i++){             varnode1=newtwaver.Node({                 name:'Node-'+i,                 location:{                     x:100,                     y:200                 },             });             node1.setIcon(null);             node1.setParent(group);             box.add(node1);             for(varj=0;j<2;j++){                 varnode2=newtwaver.Node();                 node2.setName('Node-'+i+'-'+j);                 node2.setParent(node1);                 node2.setIcon(null);                 box.add(node2);                   for(vark=0;k<2;k++){                     varnode3=newtwaver.Node();                     node3.setName('Node-'+i+'-'+j+'-'+k);                 node3.setParent(node2);                 node3.setIcon(null);                 box.add(node3);                 for(varm=0;m<4;m++){                     varnode4=newtwaver.Node();                     node4.setName('Node-'+i+'-'+j+'-'+'-'+k+'-'+m);                 node4.setParent(node3);                 node4.setIcon(null);                 box.add(node4);             }             varnode=newtwaver.Node({                 name:'Node-'+(i+1)+'-'+(j+1)+'-'+(k+1)             });             node.setIcon(null);             box.add(node);             node.setParent(node2);         }         varnode=newtwaver.Node({                 name:'Node-'+(i+1)+'-'+(j+1)             });         node.setIcon(null);         box.add(node);         node.setParent(node1);     }     varnode=newtwaver.Node({         name:'Node-'+(i+1)     });     node.setIcon(null);     box.add(node);     node.setParent(group);     }     tree.expandAll(); } ]]></script>

如有需要可邮箱联系：[e-mail]