熟悉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); |
6 |
var ui:twaver.network.ui.ElementUI = network.getElementUI(child); |
8 |
rects.addItem( new Rectangle(ui.x, ui.y, ui.measuredWidth, ui.measuredHeight)); |
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); |
17 |
rects.addItem( new Rectangle(ui.x, ui.y, ui.measuredWidth, ui.measuredHeight)); |
然后看看实现效果


上下点击,貌似实现了,看来我们的思路是正确的,刚进入页面共享的网元是现实的,但选中Group后,共享网元被覆盖了,TWaver老用户知道了,我们该用Layer了,还有一个问题截图中我们看到上面的Group总是覆盖下面的Group,那如何解呢?好解,我们设置Group的透明度吧,见下面代码
1 |
var group:Group = new Group(); |
2 |
group.addChild(HAProxy1); |
3 |
group.addChild(HAProxy2); |
5 |
group.setStyle(Styles.GROUP_SHAPE, Consts.SHAPE_OVAL); |
6 |
group.setStyle(Styles.GROUP_FILL_ALPHA, 0.5 ); |
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); |
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(); |
这下完成了,各位看官可以下载附近中Demo,拖拖拽拽试试效果,附件下载后放在TWaver Demo中,替换原来的文件可运行
LinkEditorDemo
- 多路径配置vlome group共享存储,VG的更新。
1. PV的概念: a) 一块物理磁盘一块物理硬盘在被LVM管理时被称为“物理卷”. b) 在LVM能对其进行管理之前需要在硬盘上产生一些特殊的数据结构,这个过程就是建立 ...
- iOS应用程序间共享数据
我们知道iOS由于沙盒的存在,应用程序不能越过自己的区域去访问别的存储空间的内容,不过可能有许多场景我们需要在应用程序之间共享数据,比如多个应用共用用户名密码进行登录等.虽然我们不能直接通过文件系统来 ...
- App Extension Today
App Extensions 是iOS8新开放的扩展机制,之后不断增加功能.App Extension Programming Guide: Today 不喜欢废话,直接上干货! 一:重要概 ...
- WWDC2014之App Extensions学习笔记
一.关于App Extensions extension是iOS8新开放的一种对几个固定系统区域的扩展机制,它可以在一定程度上弥补iOS的沙盒机制对应用间通信的限制. extension的出现,为用户 ...
- iOS8中添加的extensions总结(四)——Action扩展
Action扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 本次教程利用网站bitly.com进行 bit ...
- RabbitMQ和Kafka到底怎么选?
前言 开源社区有好多优秀的队列中间件,比如RabbitMQ和Kafka,每个队列都貌似有其特性,在进行工程选择时,往往眼花缭乱,不知所措.对于RabbitMQ和Kafka,到底应该选哪个? Rabbi ...
- fork()相关的源码解析
fork()的真正执行采用的是do_fork()函数,所以下文将从do_fork()函数对fork()进行源码解析.下图是do_fork()的源码函数设计: 从上图我们可以看到do_fork()涉及到 ...
- launch 文件的写法
1. launch文件的写法 ❀标签 ☺<node> 启动一个节点 ☺ <param> 设置参数服务器的参数 ☺ < ...
- Git 的 WindowsXP安装
文章1: http://blog.sina.com.cn/s/blog_5063e4c80100sqzq.html 一.安装必要客户端 1. TortoiseGit http://tortoisegi ...
随机推荐
- 堆和栈的区别【以java为例潜入分析】
Java的堆是一个运行时数据区,类的对象从中分配空间,这些对象通过new等指令建立. 堆是由垃圾回收来负责的,堆的优势是可以动态地分配内存大小,生存期也不必事先告诉编译器,Java的垃圾收集器会自动 ...
- 分布式消息通信(ActiveMQ)
分布式消息通信(ActiveMQ) 应用场景 异步通信 应用解耦 流量削峰 # ActiveMQ安装 下载 http://activemq.apache.org/ 压缩包上传到Linux系统 apac ...
- shiro vue 前后端分离中模拟登录遇到的坑
系统采用jeeplus框架(ssm+redis+shiro+mongodb+redis),默认是了JSP未做前后端分离,由于业务需要已经多终端使用的需求(H5.小程序等),需要实现前后端分离.但是由于 ...
- 使用Redis存储Nginx+Tomcat负载均衡集群的Session
配置Tomcat的session共享可以有三种解决方案: 第一种是以负载均衡服务器本身提供的session共享策略,每种服务期的配置是不一样的并且nginx本身是没有的. 第二种是利用web容器本身的 ...
- [读书笔记1]《C语言嵌入式系统编程修炼》
大学前两年一直搞的是单片机,写的是嵌入式C语言程序,走过了不少弯路,现在感觉仍然在走弯路.有幸偶尔看到了这篇文章,深感自己以前写程序的时候存在很多误区.现写篇博客做下总结. 作者:宋宝华出处:天极 ...
- [LOJ#10064]黑暗城堡
Description 在顺利攻破 Lord lsp 的防线之后,lqr 一行人来到了 Lord lsp 的城堡下方.Lord lsp 黑化之后虽然拥有了强大的超能力,能够用意念力制造建筑物,但是智商 ...
- ACM_Appleman and Card Game(简单贪心)
Appleman and Card Game Time Limit: 2000/1000ms (Java/Others) Problem Description: Appleman has n car ...
- UE编辑器编译和运行java设置
工具原料: UE编辑器 1点击“高级”,再点击“工具配置”. 2点击“插入”,在“菜单项”名称上输入“编译java程序”,在“命令行”里输入“javac %n%e”,在工作目录上填“%p”. 3切换到 ...
- 清除WebSphere部署应用所对应的JSP缓存
Web应用部署在WebSphere Application Server v8.5后程序一般放置在<AppServer>/profiles/<profile_name>/ins ...
- React 篇 Search Bar and content Table
我们要构建一个模块,其中包含一个内容显示的表格,然后上面有一个提供Search的栏位,并对Search中输入栏进行监听,当有改变的时候,触发Search然后对内容表中的内容进行过滤. Demo Lin ...