首页 > 代码库 > 在TWaver的Tree节点上画线

在TWaver的Tree节点上画线

2024-11-02 15:39:39   226人阅读

论坛上有同学提出如何在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<scriptsrc="../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>

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

在TWaver的Tree节点上画线


联系
我们