Group共享网元
来源:互联网 发布:diskgenius软件免费版 编辑:程序博客网 时间:2024/04/28 00:51
熟悉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中,替换原来的文件可运行
- Group共享网元
- TWaver Group共享网元
- FlyWeight 共享元对象结构模式
- Flyweight Design Pattern 共享元设计模式
- C++ 友元(共享数据)
- 享元模式--共享的思想
- 多路径配置vlome group共享存储,VG的更新。
- group
- group
- Group
- Group
- $group
- 享元模式-分离内外部特征,共享对象
- Java设计模式(四)Proxy(代理),Flyweight(共享元)
- 设计技巧3:享元 FlyWeight 共享相同的部分
- 设计模式之享元模式,内存共享模式,Flyweight
- Java共享模式/享元模式(Flyweight模式)
- 对象共享避免创建多对象享元模式-- 笔记
- java反射通过get方法获得属性值
- [搜狗招聘] 搜狗搜索引擎 产品专员 欢迎实习生
- read系统调用深度剖析
- 内核如何管理你的内存(转自melody_lu123)
- Android中将信息写入xml中
- Group共享网元
- App列表之分组ListView
- Java中的equals()方法
- 又到一年校招时: 校园用户使用的招聘类网站对比
- 最新一代的中置后驱V8跑车 法拉利458壁纸
- hdu 4941 STL HASH 模拟
- sed命令详解
- IE将开始屏蔽旧版ActiveX控件
- fmt格式化标签