熟悉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,参考代码

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

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

Group共享网元的更多相关文章

  1. 多路径配置vlome group共享存储,VG的更新。

    1.  PV的概念: a)        一块物理磁盘一块物理硬盘在被LVM管理时被称为“物理卷”. b)        在LVM能对其进行管理之前需要在硬盘上产生一些特殊的数据结构,这个过程就是建立 ...

  2. iOS应用程序间共享数据

    我们知道iOS由于沙盒的存在,应用程序不能越过自己的区域去访问别的存储空间的内容,不过可能有许多场景我们需要在应用程序之间共享数据,比如多个应用共用用户名密码进行登录等.虽然我们不能直接通过文件系统来 ...

  3. App Extension Today

     App Extensions 是iOS8新开放的扩展机制,之后不断增加功能.App Extension Programming Guide: Today   不喜欢废话,直接上干货!   一:重要概 ...

  4. WWDC2014之App Extensions学习笔记

    一.关于App Extensions extension是iOS8新开放的一种对几个固定系统区域的扩展机制,它可以在一定程度上弥补iOS的沙盒机制对应用间通信的限制. extension的出现,为用户 ...

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

    Action扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 本次教程利用网站bitly.com进行 bit ...

  6. RabbitMQ和Kafka到底怎么选?

    前言 开源社区有好多优秀的队列中间件,比如RabbitMQ和Kafka,每个队列都貌似有其特性,在进行工程选择时,往往眼花缭乱,不知所措.对于RabbitMQ和Kafka,到底应该选哪个? Rabbi ...

  7. fork()相关的源码解析

    fork()的真正执行采用的是do_fork()函数,所以下文将从do_fork()函数对fork()进行源码解析.下图是do_fork()的源码函数设计: 从上图我们可以看到do_fork()涉及到 ...

  8. launch 文件的写法

    1. launch文件的写法 ❀标签          ☺<node> 启动一个节点          ☺ <param> 设置参数服务器的参数          ☺ < ...

  9. Git 的 WindowsXP安装

    文章1: http://blog.sina.com.cn/s/blog_5063e4c80100sqzq.html 一.安装必要客户端 1. TortoiseGit http://tortoisegi ...

随机推荐

  1. 堆和栈的区别【以java为例潜入分析】

     Java的堆是一个运行时数据区,类的对象从中分配空间,这些对象通过new等指令建立. 堆是由垃圾回收来负责的,堆的优势是可以动态地分配内存大小,生存期也不必事先告诉编译器,Java的垃圾收集器会自动 ...

  2. 分布式消息通信(ActiveMQ)

    分布式消息通信(ActiveMQ) 应用场景 异步通信 应用解耦 流量削峰 # ActiveMQ安装 下载 http://activemq.apache.org/ 压缩包上传到Linux系统 apac ...

  3. shiro vue 前后端分离中模拟登录遇到的坑

    系统采用jeeplus框架(ssm+redis+shiro+mongodb+redis),默认是了JSP未做前后端分离,由于业务需要已经多终端使用的需求(H5.小程序等),需要实现前后端分离.但是由于 ...

  4. 使用Redis存储Nginx+Tomcat负载均衡集群的Session

    配置Tomcat的session共享可以有三种解决方案: 第一种是以负载均衡服务器本身提供的session共享策略,每种服务期的配置是不一样的并且nginx本身是没有的. 第二种是利用web容器本身的 ...

  5. [读书笔记1]《C语言嵌入式系统编程修炼》

      大学前两年一直搞的是单片机,写的是嵌入式C语言程序,走过了不少弯路,现在感觉仍然在走弯路.有幸偶尔看到了这篇文章,深感自己以前写程序的时候存在很多误区.现写篇博客做下总结. 作者:宋宝华出处:天极 ...

  6. [LOJ#10064]黑暗城堡

    Description 在顺利攻破 Lord lsp 的防线之后,lqr 一行人来到了 Lord lsp 的城堡下方.Lord lsp 黑化之后虽然拥有了强大的超能力,能够用意念力制造建筑物,但是智商 ...

  7. ACM_Appleman and Card Game(简单贪心)

    Appleman and Card Game Time Limit: 2000/1000ms (Java/Others) Problem Description: Appleman has n car ...

  8. UE编辑器编译和运行java设置

    工具原料: UE编辑器 1点击“高级”,再点击“工具配置”. 2点击“插入”,在“菜单项”名称上输入“编译java程序”,在“命令行”里输入“javac %n%e”,在工作目录上填“%p”. 3切换到 ...

  9. 清除WebSphere部署应用所对应的JSP缓存

    Web应用部署在WebSphere Application Server v8.5后程序一般放置在<AppServer>/profiles/<profile_name>/ins ...

  10. React 篇 Search Bar and content Table

    我们要构建一个模块,其中包含一个内容显示的表格,然后上面有一个提供Search的栏位,并对Search中输入栏进行监听,当有改变的时候,触发Search然后对内容表中的内容进行过滤. Demo Lin ...