论坛上有同学提出如何在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节点上画线的更多相关文章

  1. unity3d之在屏幕上画线

    如何在屏幕上画线,简单的代码如下: using UnityEngine; public class Test : MonoBehaviour { void OnGUI() { GL.LoadOrtho ...

  2. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

  3. Silverlight 结合ArcGis 在地图上画线

    原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/10/72085.aspx 先来看看完成后的画面,我从桃园画到高雄,再由高雄画到香港 ...

  4. javascript一个在网页上画线的库

    文章;安利一个绘制指引线的JS库leader-line 一个在网页上划线的库感觉很不错.

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

    前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例 ...

  6. 在MPAndroidChart库K线图的基础上画均线

    CombinedChart 可以直接使用MPAndroidChart库里面提供的CombinedChart实现组合图形 Demo:CombinedChartDemo ------分割线(如果想在一个图 ...

  7. ArcGIS API for Flex实现GraphicsLayer上画点、线、面。

    目的: ArcGIS API for Flex实现GraphicsLayer上画点.线.面. 准备工作: 1.这次地图数据就用Esri提供的http://server.arcgisonline.com ...

  8. altium designer不经过原理图直接在空白pcb上加封装然后画线

    如果是复杂点的PCB,建议还是画下SCH,如果PCB只有几个元件,那么可以用这种方法,想不画原理图,直接进行布线,往往是很多初学者最想知道的,但是这也一定不是初学者能学到的.因为你买的书,都是按画PC ...

  9. android中实现在ImageView上随意画线涂鸦

    我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完 ...

随机推荐

  1. Codeforces Round #319 (Div. 2) C. Vasya and Petya's Game 数学题

                                                     C. Vasya and Petya's Game                           ...

  2. Selenium Webdriver弹出框 微博分享的内容控制与结果生成

    browser.window_handles for i in ugc_url_l: js = 'window.location.href="{}"'.format(i) brow ...

  3. 8-23 canvas专题

    8-23 canvas专题-了解外部框架的使用 学习要点 掌握画布内容的导出的toDataURL()方法 了解外部框架的使用 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canv ...

  4. 8-2 canvas专题-线条样式

    8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...

  5. 国产手机没有google services 和google play崩溃,判断google services是否存在

    public static boolean isGooglePlayServiceAvailable (Context context) { int status = GooglePlayServic ...

  6. POJ1673 ZOJ1776 三角形四心模板

    POJ1673 题中所述点即为三角形的垂心,用向量法可以轻松证明. 垂心 重心 外心 均位于三角形的欧拉线上,且三者有线性关系,于是,求出重心和外心即可求得垂心. 重心就是三点的平均值,外心可以通过解 ...

  7. mybatis 注解写法 多层嵌套foreach,调用存储过程,批量插入数据

    @Select("<script>" + "DECLARE @edi_Invoice_Details edi_Invoice_Details;" + ...

  8. springboot开发过程中的小坑(持续更新)

    1. 启动的Application必须放到一个package下面,如下: package com.example.kikidemo; import org.springframework.boot.S ...

  9. vue seo

    最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下: 1.收集几个流量大的网站(必须是vue做的)页面交互和逻辑尽可能复杂多样2.对比一下各个页面的seo是如何做的3. ...

  10. bzoj 1623: [Usaco2008 Open]Cow Cars 奶牛飞车【排序+贪心】

    从小到大排个序,然后能选就选 #include<iostream> #include<cstdio> #include<algorithm> using names ...