在TWaver的Tree节点上画线

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


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

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>

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