在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时(即手指离开时,这时一条线已经画完 ...
随机推荐
- Codeforces Round #319 (Div. 2) C. Vasya and Petya's Game 数学题
C. Vasya and Petya's Game ...
- Selenium Webdriver弹出框 微博分享的内容控制与结果生成
browser.window_handles for i in ugc_url_l: js = 'window.location.href="{}"'.format(i) brow ...
- 8-23 canvas专题
8-23 canvas专题-了解外部框架的使用 学习要点 掌握画布内容的导出的toDataURL()方法 了解外部框架的使用 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canv ...
- 8-2 canvas专题-线条样式
8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...
- 国产手机没有google services 和google play崩溃,判断google services是否存在
public static boolean isGooglePlayServiceAvailable (Context context) { int status = GooglePlayServic ...
- POJ1673 ZOJ1776 三角形四心模板
POJ1673 题中所述点即为三角形的垂心,用向量法可以轻松证明. 垂心 重心 外心 均位于三角形的欧拉线上,且三者有线性关系,于是,求出重心和外心即可求得垂心. 重心就是三点的平均值,外心可以通过解 ...
- mybatis 注解写法 多层嵌套foreach,调用存储过程,批量插入数据
@Select("<script>" + "DECLARE @edi_Invoice_Details edi_Invoice_Details;" + ...
- springboot开发过程中的小坑(持续更新)
1. 启动的Application必须放到一个package下面,如下: package com.example.kikidemo; import org.springframework.boot.S ...
- vue seo
最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下: 1.收集几个流量大的网站(必须是vue做的)页面交互和逻辑尽可能复杂多样2.对比一下各个页面的seo是如何做的3. ...
- bzoj 1623: [Usaco2008 Open]Cow Cars 奶牛飞车【排序+贪心】
从小到大排个序,然后能选就选 #include<iostream> #include<cstdio> #include<algorithm> using names ...