在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>

如有需要可邮箱联系:[email protected]

时间: 2024-08-13 15:22:37

在TWaver的Tree节点上画线的相关文章

最基础的applet运用--在applet上画线

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class DrawLine extends JApplet implements MouseListener,MouseMotionListener{ int x1,y1,x2,y2; // int screenx,screeny; // Dimension screen; Stroke sk=new BasicStroke(2.0f); publi

在imageView上画线(转)

前提:CoreGraphics.framework - (void)viewDidLoad { [super viewDidLoad]; UIImageView *imageView=[[UIImageView alloc] initWithFrame:self.view.frame]; [self.view addSubview:imageView]; self.view.backgroundColor=[UIColor blueColor]; UIGraphicsBeginImageCont

画线缩放、瞳距缩放、Line延长到指定长度,内附效果,源码供应,解压就跑

原文:画线缩放.瞳距缩放.Line延长到指定长度,内附效果,源码供应,解压就跑 前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例子1:以皮卡丘为例,我要把路飞的拳头缩放到皮卡丘头那么大 例子2:以皮卡丘的基准,缩小路飞,与其身高一致 好了,相比看了上面的2个效果图,就明白了大致意思,这个demo可以获得,Canvas里面的Line如何顺着线条方向

[stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画

>_<:这里的动画是黄色矩形区域中一个模仿俯视图的起重机运作动画,一个是模仿主视图的吊钩的运动.通过改变初始Init函数中的数据b_x,b_y实现矩形区域的移动.当实时采集时要首先根据起重机的实际情况改变比例,当传感器传来数据时就相当于这里的run函数,只要把传感器数据接收函数和相关函数结合即可. >_<:main code: 1 #include "stdlib.h" 2 #include "GUI.H" 3 /* 4 颜色 5 */ 6

根据某条件给GridView符合条件的值画上删除线

如博文标题,根据某些条件对GridView控件中,对符合条件的值画上删除线效果.实现这些要求,只人捕获到哪些符合要求的数据即可.GridView控件是在TemplateField模版显示数据,Insus.NET并没有使用任一控件,如label或literal等控件来呈现数据.稍后在写OnRowDataBound事件,会教大家怎样去捕获取需要的数据. 下面是对GridView控件时行数据绑定,由于在Insus.NET博客已经无数次有写到怎样创建数据,写存储过程,创建对象(类class),这些在此篇

unity3d GL画线/物体跟随/坐标系转换

看见标题的人是不是在想... 一个小小的GL画线难吗? 一个小小的物体跟随难吗? 嗯,的确,一点不难.... 我一开始也是像你们那样想的,但是实际操作起来,还是和理论有区别的 写这个demo起因是这样的: 面试到了一家虚拟现实的公司,因为没有去公司 网上直接谈的,谈妥了hr估计是想看看我能不能胜任 给了我一张效果图,让我去实现画线的功能 咳咳,要求还是比较细致的,这里我们后面说 废话不多说,老规矩,先上效果图,然后直接进入主题 第一张是hr给我的图,第二张是我自己实现的 需求如下: 1.模型是旋

使用JavaScript实现使用鼠标画线的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

OpenGL进阶示例1——动态画线(虚线、实线、颜色、速度等)

用OpenGL动态绘制线段,其实很简单,但到现在为止,网上可参考资料并不多.于是亲自动手写一个函数,方便动态绘制线段.代码如下: #include<GL/glut.h> //OpenGL实用工具包 #include <Windows.h> /*所遇问题: 1.系统API函数Sleep()不听话,睡眠时快时慢(可能跟我计算机当前运行程序有关吧) 解决方案:重写Sleep()函数,实质为空循环.仅用于Debug下,Release会将其优化 2.动态画直线,朝某些方向画线时出现块状 解决

图形学--(中点画线法+Bresenham画线算法)

编程环境:codeblocks+EGE库 用到的函数:putpixel(int x1,int y1,int color)  用某种颜色打亮一个坐标点. 这俩种算法都是用来在计算机上画一条直线的,那么我们为什么不直接用直线方程分别带点再打亮呢,这是因为,计算机中每个坐标点都是整数,而直线是由一个个像素点组合而成的,那么,直接将坐标点再进行四舍五入整数化就好了啊,的确,这是一种方法,但计算机中进行浮点数的四舍五入会使运算效率变差,因此真正画直线时是用到上边这俩种方法的. 1.中点画线法 只考虑当直线