TWaver Group共享网元
来源:互联网 发布:外国网络社交平台 编辑:程序博客网 时间:2024/05/17 08:59
熟悉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,参考下面代码
network.groupChildrenRectsFunction = function(group:Group, network:twaver.network.Network):ICollection {var rects:ICollection = new Collection();for(var i:int = 0; i < group.childrenCount; i++){var child:IElement = group.children.getItemAt(i);if(child is Node){var ui:twaver.network.ui.ElementUI = network.getElementUI(child);if(ui != null){rects.addItem(new Rectangle(ui.x, ui.y, ui.measuredWidth, ui.measuredHeight));}}}var box:ElementBox = network.elementBox;box.forEach(function(e:Element){if(e.getClient('shared')){var ui:twaver.network.ui.ElementUI = network.getElementUI(e);if(ui != null){rects.addItem(new Rectangle(ui.x, ui.y, ui.measuredWidth, ui.measuredHeight));}}});return rects;};然后看看实现效果
上下点击,貌似实现了,看来我们的思路是正确的,刚进入页面共享的网元是现实的,但选中Group后,共享网元被覆盖了,TWaver老用户知道了,我们该用Layer了,还有一个问题截图中我们看到上面的Group总是覆盖下面的Group,那如何解呢?好解,我们设置Group的透明度吧,见下面代码
var group:Group = new Group();group.addChild(HAProxy1);group.addChild(HAProxy2);group.expanded = true;group.setStyle(Styles.GROUP_SHAPE, Consts.SHAPE_OVAL);group.setStyle(Styles.GROUP_FILL_ALPHA,0.5);elementBox.add(group);var group1:Group = new Group();group1.addChild(HAProxy3);group1.addChild(HAProxy4);group1.expanded = true;group1.setStyle(Styles.GROUP_SHAPE, Consts.SHAPE_OVAL);group1.setStyle(Styles.GROUP_FILL_ALPHA,0.5);elementBox.add(group1);var layer:Layer = new Layer(100);var HAProxy5:Node = createNode("HAProxy5", "HAProxyIcon", new Point(180, 280), Consts.POSITION_BOTTOMLEFT);HAProxy5.setClient('shared', true);HAProxy5.layerID = layer.id;var HAProxy6:Node = createNode("HAProxy6", "HAProxyIcon", new Point(400, 280), Consts.POSITION_BOTTOMRIGHT);HAProxy6.setClient('shared', true);HAProxy6.layerID = layer.id;elementBox.layerBox.add(layer);再看看效果:
暮然回首,效果实现了,但是不要高兴太早,如果移动网元,你会发现移动Group的孩子Group的大小会随之改变,但是移动共享的网元,只有选择了Group后,Group才回改变,如果你有需求的话,那就要添加上监听当网元的location变化后重绘network,参考代码
elementBox.addDataPropertyChangeListener(function(e:PropertyChangeEvent):void {if(e.property == "location"){network.invalidateElementUIs();}});
这下完成了,各位看官可以下载附近中Demo,拖拖拽拽试试效果,附件下载后放在TWaver Demo中,替换原来的文件可运行
下载测试文件
- TWaver Group共享网元
- Group共享网元
- TWaver网元动态转动效果
- TWaver HTML5学习笔记 —— 选择隐藏网元
- twaver flex 编程之Group局部布局
- TWaver HTML5学习笔记 —— 动态设置网元样式
- TWaver HTML5学习笔记 —— 动态设置网元图片大小
- twaver
- Twaver
- TWaver局部自动布局及嵌套Group处理
- 认识TWaver
- FlyWeight 共享元对象结构模式
- Flyweight Design Pattern 共享元设计模式
- C++ 友元(共享数据)
- 享元模式--共享的思想
- 多路径配置vlome group共享存储,VG的更新。
- TWaver加上了TreeTable
- TWaver 1.4发布
- 小P的故事——神奇的饭卡
- APUE:一些函数
- 斗地主发牌小程序
- hdoj 1086 You can Solve a Geometry Problem too 【计算几何】
- 产品管理-需求篇——(Persona——Web人物角色介绍(转))
- TWaver Group共享网元
- 您好,设计模式
- 最小费用最大流
- 适应多行长文本的Android TextView
- 图解安装 Application Development Runtime
- 【二分+半平面交】 POJ 3525 Most Distant Point from the Sea
- 创建基于数据库的MDS
- Linux进程间通信 IPC
- 部署ADF应用到独立的WebLogic Server上