Group共享网元

熟悉TWaver的用户都知道Group的概念,如果是Group,那必然会出现一个网元在多组的情况,最近有客户遇到这个问题,给写了Demo,这些也跟大家分享一下如何实现,先让我们看看共享网元的效果。

熟悉TWaver的用户知道添加到Group中的网元,这些网元的父亲都是这个Group,既然称之为父亲,那当然一个网元只能有一个父亲,那么实现Group共享网元的效果就不能用Parent的属性来实现了。我们来分析一下在TWaver里体现一个网元属于某个Group,就是这个网元画在Group内,而Group的范围是由它的children的位置决定的,上面说了实现Group共享网元的效果是不能通过父子关系来实现的,那么我们就要从计算Group范围的地方入手,只要让Group不仅仅考虑它children的位置,也考虑需要共享的网元位置,就可以了,那么这个思路是否可行,让我们试试。

在TWaver中network在获取Group范围的方法是调用groupChildrenRectsFunction方法,这个方法默认只计算Group的children,那么根据上面的分析我们就重写这个方法,也添加上需要共享的网元。DataBox中网元很多,那么哪些网元需要共享呢,我们就给需要共享的网元添加一个自定义属性shared,如果需要共享值为TRUE,参考下面代码

1 network.groupChildrenRectsFunction
= function(group:Group, network:twaver.network.Network):ICollection {
2     var
rects:ICollection = 
new Collection();
3     for(var
i:
int 0;
i < group.childrenCount; i++){
4         var
child:IElement = group.children.getItemAt(i);
5         if(child
is Node){
6             var
ui:twaver.network.ui.ElementUI = network.getElementUI(child);
7             if(ui
!= 
null){
8                 rects.addItem(new Rectangle(ui.x,
ui.y, ui.measuredWidth, ui.measuredHeight));
9             }
10         }
11     }
12     var
box:ElementBox = network.elementBox;
13     box.forEach(function(e:Element){
14         if(e.getClient(‘shared‘)){
15             var
ui:twaver.network.ui.ElementUI = network.getElementUI(e);
16             if(ui
!= 
null){
17                 rects.addItem(new Rectangle(ui.x,
ui.y, ui.measuredWidth, ui.measuredHeight));
18             }
19         }
20     });
21     return rects;
22 };

然后看看实现效果

上下点击,貌似实现了,看来我们的思路是正确的,刚进入页面共享的网元是现实的,但选中Group后,共享网元被覆盖了,TWaver老用户知道了,我们该用Layer了,还有一个问题截图中我们看到上面的Group总是覆盖下面的Group,那如何解呢?好解,我们设置Group的透明度吧,见下面代码

1 var
group:Group = 
new Group();
2 group.addChild(HAProxy1);
3 group.addChild(HAProxy2);
4 group.expanded
true;
5 group.setStyle(Styles.GROUP_SHAPE,
Consts.SHAPE_OVAL);
6 group.setStyle(Styles.GROUP_FILL_ALPHA,0.5);
7 elementBox.add(group);
8  
9 var
group1:Group = 
new Group();
10 group1.addChild(HAProxy3);
11 group1.addChild(HAProxy4);
12 group1.expanded
true;
13 group1.setStyle(Styles.GROUP_SHAPE,
Consts.SHAPE_OVAL);
14 group1.setStyle(Styles.GROUP_FILL_ALPHA,0.5);
15 elementBox.add(group1);
16  
17 var
layer:Layer = 
new Layer(100);
18 var
HAProxy5:Node = createNode(
"HAProxy5""HAProxyIcon"new Point(180,280),
Consts.POSITION_BOTTOMLEFT);
19 HAProxy5.setClient(‘shared‘true);
20 HAProxy5.layerID
= layer.id;
21 var
HAProxy6:Node = createNode(
"HAProxy6""HAProxyIcon"new Point(400,280),
Consts.POSITION_BOTTOMRIGHT);
22 HAProxy6.setClient(‘shared‘true);
23 HAProxy6.layerID
= layer.id;
24 elementBox.layerBox.add(layer);

再看看效果:

暮然回首,效果实现了,但是不要高兴太早,如果移动网元,你会发现移动Group的孩子Group的大小会随之改变,但是移动共享的网元,只有选择了Group后,Group才回改变,如果你有需求的话,那就要添加上监听当网元的location变化后重绘network,参考代码

view
source

print?

1 elementBox.addDataPropertyChangeListener(function(e:PropertyChangeEvent):void{
2     if(e.property
== 
"location"){
3         network.invalidateElementUIs();
4     }
5 });

这下完成了,各位看官可以下载附近中Demo,拖拖拽拽试试效果,附件下载后放在TWaver Demo中,替换原来的文件可运行

Group共享网元

时间: 2024-10-12 06:57:01

Group共享网元的相关文章

iOS应用程序间共享数据(转)

我们知道iOS由于沙盒的存在,应用程序不能越过自己的区域去访问别的存储空间的内容,不过可能有许多场景我们需要在应用程序之间共享数据,比如多个应用共用用户名密码进行登录等.虽然我们不能直接通过文件系统来分享数据,不过还是有些方法可以实现,为了方便说明,这里同时创建了两个工程Example1和Example2,实现这两个app之间的信息共享,Example1负责写数据,Example2负责读数据,具体的demo代码可以到这里获取 UIPasteboard 剪贴板是应用程序之间传递数据的简单方式,建议

不同App之间共享数据

我们知道iOS由于沙盒的存在,应用程序不能越过自己的区域去访问别的存储空间的内容,不过可能有许多场景我们需要在应用程序之间共享数据,比如多个应用共用用户名密码进行登录等.虽然我们不能直接通过文件系统来共享数据,不过还是有些方法可以实现. 这里,我们新建两个工程,T1:负责写数据,T2:负责读数据. 方法一:UIPasteboard 剪贴板是应用程序之间传递数据的简单方式,建议不要使用全局的粘贴板,而是自己根据名字创建一个新的粘贴板,防止其它地方全局拷贝的影响.然后把需要共享的内容复制到粘贴板,粘

iOS应用程序间共享数据

我们知道iOS由于沙盒的存在,应用程序不能越过自己的区域去访问别的存储空间的内容,不过可能有许多场景我们需要在应用程序之间共享数据,比如多个应用共用用户名密码进行登录等.虽然我们不能直接通过文件系统来分享数据,不过还是有些方法可以实现,为了方便说明,这里同时创建了两个工程send和receive,实现这两个app之间的信息共享,send负责写数据,receive负责读数据,具体的demo代码可以到这里获取 UIPasteboard 剪贴板是应用程序之间传递数据的简单方式,建议不要使用全局的粘贴板

Git 的 WindowsXP安装

文章1: http://blog.sina.com.cn/s/blog_5063e4c80100sqzq.html 一.安装必要客户端 1. TortoiseGit http://tortoisegit.googlecode.com/files/TortoiseGit-1.0.2.0-32bit.msi 下载安装后,重启系统. 2. 安装 msysgit a. 从 http://msysgit.googlecode.com/files/Git-1.6.2.1-preview20090322.ex

如何总结和整理学术文献?

nerfing ,爱科学爱文学 收录于 知乎圆桌 . 编辑推荐 •袁霖等 2118 人赞同 第一次在知乎答题... 我认为整理文献的主要目的就是:能够在任何条件下,快速找到所需信息.任何好用的软件,都不如大批量多批次的文献阅读. 我的思路是:轻整理,重搜索.轻整理,是指不对文献分类,或者只是对文献简单分类.重搜索,是指利用不同的搜索工具,快速定位到我需要的文献.我认为在现在搜索技术已经很强大的情况下,如果利用笔记等手段整理,反而容易造成条条框框,在对于一篇文献关注太长的时间,不利于提高效率.在日

Photo Editing Extension 详解 (附带应用滤镜Demo)

extension是iOS8新开放的一种对几个固定系统区域的扩展机制,它可以在一定程度上弥补iOS的沙盒机制对应用间通信的限制.允许应用帮助系统扩展自定义功能,去实现一个特定作用域的任务,如照片编辑.自定义键盘.通知中心.Action动作.Share分享等. 这对于一向封闭的iOS来说, 无疑是一大福音. 虽然iOS8离现在比较远了, 分享 "Extension " 相关的文章也很多了, 不过对于"Photo Editing", 我觉得还是有必要来讲一讲的, 一来多

iOS8中添加的extensions总结(四)——Action扩展

Action扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 本次教程利用网站bitly.com进行 bitly网站进行对网络链接的精简化,比如将YouTube某个视频链接转化为bit.ly/1wOl2zf这种形式:同时,该网站提供对链接进行数据分析等服务,直接在链接后+“+”即可查看流量.点击量等信息,比如 bit.ly/1wOl2zf+ . 1.注册点击:https://bitly.com/a/sign_up 

fork()相关的源码解析

fork()的真正执行采用的是do_fork()函数,所以下文将从do_fork()函数对fork()进行源码解析.下图是do_fork()的源码函数设计: 从上图我们可以看到do_fork()涉及到众多的参数.所以在进入do_fork函数进行分析之前,很有必要了解一下它的参数. clone_flags:克隆标识: * * cloning flags: */#define CSIGNAL 0x000000ff /* signal mask to be sent at exit *//** * 共

2-5-NFS服务器配置和autofs自动挂载-配置Samba服务器配置现实文件共享

大纲: NFS服务器运行原理 实战配置NFS服务器 配置Samba服务器配置现实文件共享 ----------------------------------------------- 问题: # 怎么查看文件系统类型?! file -s /dev/sda #可查看未挂载的文件系统 df -T  #df -lhT #查看已挂载文件系统 mount #查看已挂载文件系统 fdisk /dev/sda  <输入 c 或 u 或 p 查看信息> parted  <输入p  打印分区表>