熟悉TWaver的用户都知道Group的概念,如果是Group,那必然会出现一个网元在多组的情况,最近有客户遇到这个问题,给写了Demo,这些也跟大家分享一下如何实现,先让我们看看共享网元的效果。
![group share nodes](http://twaver.servasoft.com/wp-content/uploads/2014/08/group-share-nodes-300x136.png)
熟悉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)); |
然后看看实现效果
![twavergroup2](http://twaver.servasoft.com/wp-content/uploads/2014/08/twavergroup2-300x221.png)
![twavergroup1](http://twaver.servasoft.com/wp-content/uploads/2014/08/twavergroup1-300x229.png)
上下点击,貌似实现了,看来我们的思路是正确的,刚进入页面共享的网元是现实的,但选中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); |
再看看效果:
![twavergroup3](http://twaver.servasoft.com/wp-content/uploads/2014/08/twavergroup3-300x275.png)
暮然回首,效果实现了,但是不要高兴太早,如果移动网元,你会发现移动Group的孩子Group的大小会随之改变,但是移动共享的网元,只有选择了Group后,Group才回改变,如果你有需求的话,那就要添加上监听当网元的location变化后重绘network,参考代码
1 | elementBox.addDataPropertyChangeListener(function(e:PropertyChangeEvent): void { |
2 | if (e.property == "location" ){ |
3 | network.invalidateElementUIs(); |
这下完成了,各位看官可以下载附近中Demo,拖拖拽拽试试效果,附件下载后放在TWaver Demo中,替换原来的文件可运行