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

如有需要可邮箱联系:jeff.fu@servasoft.com
在TWaver的Tree节点上画线的更多相关文章
- unity3d之在屏幕上画线
如何在屏幕上画线,简单的代码如下: using UnityEngine; public class Test : MonoBehaviour { void OnGUI() { GL.LoadOrtho ...
- ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...
- Silverlight 结合ArcGis 在地图上画线
原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/10/72085.aspx 先来看看完成后的画面,我从桃园画到高雄,再由高雄画到香港 ...
- javascript一个在网页上画线的库
文章;安利一个绘制指引线的JS库leader-line 一个在网页上划线的库感觉很不错.
- 画线缩放、瞳距缩放、Line延长到指定长度,内附效果,源码供应,解压就跑
前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例 ...
- 在MPAndroidChart库K线图的基础上画均线
CombinedChart 可以直接使用MPAndroidChart库里面提供的CombinedChart实现组合图形 Demo:CombinedChartDemo ------分割线(如果想在一个图 ...
- ArcGIS API for Flex实现GraphicsLayer上画点、线、面。
目的: ArcGIS API for Flex实现GraphicsLayer上画点.线.面. 准备工作: 1.这次地图数据就用Esri提供的http://server.arcgisonline.com ...
- altium designer不经过原理图直接在空白pcb上加封装然后画线
如果是复杂点的PCB,建议还是画下SCH,如果PCB只有几个元件,那么可以用这种方法,想不画原理图,直接进行布线,往往是很多初学者最想知道的,但是这也一定不是初学者能学到的.因为你买的书,都是按画PC ...
- android中实现在ImageView上随意画线涂鸦
我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完 ...
随机推荐
- go5--数组
package main /* 数组Array 定义数组的格式:var <varName> [n]<type>,n>=0 数组长度也是类型的一部分,因此具有不同长度的数组 ...
- POJ 2080:Calendar
Calendar Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 12546 Accepted: 4547 Descrip ...
- 【IOI2013】【Bzoj3246】Dreaming
http://www.lydsy.com/JudgeOnline/problem.php?id=3246 中文题面 天地之初,世界尚在遥远的梦想之中. Serpent(水蛇)生活的地方有N个水坑,编号 ...
- echart x轴 type
x轴类型有三种(y轴类似) 1 category 类目轴,适用于离散的类目数据 ,就是x周的类别是自定义的,都是字符串,需要通过data设置类目数据 与series 中data对应,data是一维数组 ...
- MogileFS的实现和bug解决
MogileFS的实现 准备三个主机: centos7.1:tracker节点.database节点.storage节点:192.168.213.251 centos7.2.centos7.3:sto ...
- vue父组件访问子组件
1.父组件(父组件访问子组件的方法drop) <!--父组件访问子组件的方法v-ref:shopcart--> <template> <div id="pare ...
- 最优贸易 2009年NOIP全国联赛提高组(最短路)
最优贸易 2009年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description [问题描述]C ...
- P2470 [SCOI2007]压缩
传送门 区间dp,记\(dp(l,r,t)\)表示区间\((l,r)\),\(t\)表示这个区间中能不能放\(M\).如果可以,枚举中间哪里放\(M\)来压缩.也可以不压缩,后面直接跟上去.如果左右重 ...
- 添加tomcat开机启动服务时报错:Neither the JAVA_HOME nor the JRE_HOME enviromment variable is defined
首先,参考的 https://blog.csdn.net/wabil/article/details/78818249 的方式添加 tomcat 开机启动,这种方式不需要添加 setenv.sh 文件 ...
- 前端javascript 错误 Uncaught SyntaxError: Unexpected token ILLEGAL
前端控制台报Uncaught SyntaxError: Unexpected token ILLEGAL 错误时,就是非法字符错误,首先检查符号是否正确,不要出现中文标点! 然后检查参数之类的类型是否 ...