在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 [      var box = new twaver . ElementBox ( ) ;      var tree = new twaver . controls . Tree ( box ) ;        function init ( ) {          initTreeView ( ) ;          initDataBox ( ) ;      }        function initTreeView ( ) {          var treeDom = 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 ) ;      }        function initDataBox ( ) {          var group = new twaver . Group ( ) ;          group . setName ( 'Group' ) ;          group . setIcon ( null ) ;          box . add ( group ) ;            for ( var i = 0 ; i < 2 ; i ++ ) {              var node1 = new twaver . Node ( {                  name : 'Node-' + i ,                  location : {                      x : 100 ,                      y : 200                  } ,              } ) ;              node1 . setIcon ( null ) ;              node1 . setParent ( group ) ;              box . add ( node1 ) ;              for ( var j = 0 ; j < 2 ; j ++ ) {                  var node2 = new twaver . Node ( ) ;                  node2 . setName ( 'Node-' + i + '-' + j ) ;                  node2 . setParent ( node1 ) ;                  node2 . setIcon ( null ) ;                  box . add ( node2 ) ;                    for ( var k = 0 ; k < 2 ; k ++ ) {                      var node3 = new twaver . Node ( ) ;                      node3 . setName ( 'Node-' + i + '-' + j + '-' + k ) ;                  node3 . setParent ( node2 ) ;                  node3 . setIcon ( null ) ;                  box . add ( node3 ) ;                  for ( var m = 0 ; m < 4 ; m ++ ) {                      var node4 = new twaver . Node ( ) ;                      node4 . setName ( 'Node-' + i + '-' + j + '-' + '-' + k + '-' + m ) ;                  node4 . setParent ( node3 ) ;                  node4 . setIcon ( null ) ;                  box . add ( node4 ) ;              }              var node = new twaver . Node ( {                  name : 'Node-' + ( i + 1 ) + '-' + ( j + 1 ) + '-' + ( k + 1 )              } ) ;              node . setIcon ( null ) ;              box . add ( node ) ;              node . setParent ( node2 ) ;          }          var node = new twaver . Node ( {                  name : 'Node-' + ( i + 1 ) + '-' + ( j + 1 )              } ) ;          node . setIcon ( null ) ;          box . add ( node ) ;          node . setParent ( node1 ) ;      }      var node = new twaver . Node ( {          name : 'Node-' + ( i + 1 )      } ) ;      node . setIcon ( null ) ;      box . add ( node ) ;      node . setParent ( group ) ;      }      tree . expandAll ( ) ; } ] ] > </script>

如有需要可邮箱联系：jeff.fu@servasoft.com