被忽视的TWaver功能(1)
来源:互联网 发布:重庆宝钻资产管理 知乎 编辑:程序博客网 时间:2024/06/05 02:25
应客户需求写个Demo,Demo中包含一些常用的功能,包括解析JSON数据生成TWaver中的网元和连线,网元右下角带上不同标识的小图标,连线需要是二次曲线,弹出菜单和信息板,跟大家分享下。先上图让大家看看效果(大家在学习的同时,能否发现这次Demo有所不同)
解析JSON数据生成TWaver中的网元和连线
下面是Demo中用到的JSON数据格式样例
1
var
topo_data = [
2
{
"element"
:
"node"
,
"name"
:
"网关"
,
"id"
:
"gateway1"
,
"image"
:
"group"
,
"icon"
:
"icon_wall"
},
3
{
"element"
:
"node"
,
"name"
:
"网关"
,
"id"
:
"gateway2"
,
"image"
:
"subnetwork"
,
"icon"
:
"icon_wall"
},
4
{
"element"
:
"link"
,
"from"
:
"cloud"
,
"to"
:
"center1"
,
"name"
:
"包含关系"
},
5
{
"element"
:
"link"
,
"from"
:
"gather2"
,
"to"
:
"firewall"
,
"arrow"
:
"11"
}
6
];
根据element判断创建何种对象,是网元还是连线;image设置网元图片的名称(这些图片都是事先需要注册,如果使用TWaver内置的图片,则不需要,直接使用TWaver的图片注册名称即可,例如twaver.Defaults.IMAGE_GROUP),icon设置网元上的标识,arrow设置连线的箭头方向,下面上代码
1
function
createElement(item){
2
var
element;
3
if
(item.element ==
'link'
){
4
var
from =
this
.box.getDataById(item.from);
5
var
to =
this
.box.getDataById(item.to);
6
var
link =
new
MyLink(from, to);
7
if
(item.arrow){
8
if
(item.arrow==
"10"
|| item.arrow==
"11"
) link.setStyle(
'arrow.from'
,
true
);
9
if
(item.arrow==
"01"
|| item.arrow==
"11"
) link.setStyle(
'arrow.to'
,
true
);
10
}
11
this
.box.add(link);
12
element=link;
13
}
14
if
(item.element ==
'node'
){
15
var
node =
new
twaver.Node(item.id);
16
if
(item.image){
17
node.setImage(item.image);
18
if
(item.image==
'group'
) node.setImage(twaver.Defaults.IMAGE_GROUP);
19
if
(item.image==
'subnetwork'
) node.setImage(twaver.Defaults.IMAGE_SUBNETWORK);
20
}
21
if
(item.icon){
22
node.setStyle(
'icons.names'
, [item.icon]);
23
node.setStyle(
'icons.position'
,
'bottomright.topleft'
);
24
}
25
node.setStyle(
'shadow.blur'
,10);
26
node.setStyle(
'shadow.xoffset'
,5);
27
node.setStyle(
'shadow.yoffset'
,5);
28
this
.box.add(node);
29
element=node;
30
}
31
32
if
(element){
33
element.setStyle(
'label.font'
,
'11px "Microsoft Yahei"'
);
34
element.setName(item.name);
35
}
36
}
网元右下角带上不同标识的小图标
在TWaver里这个非常简单,使用网元自带的IconAttachment就能实现,在上面的代码中,处理icon部分有用到,icon的names可以是一个数组,同时放多个图标;还可以设置图标的X或Y轴上Y的偏移量,更多属性可以参考TWaver文档
1
node.setStyle(
'icons.names'
, [item.icon]);
2
node.setStyle(
'icons.position'
,
'bottomright.topleft'
);
来个大图欣赏欣赏
连线需要是二次曲线
这个需要重写LinkUI,只需要重写getLinkPoints的方法就可以。默认此方法返回是的是from和to两个点,如果需要二次曲线,那就需要一共3个点,这里计算from和to的中心点,并做了一个偏移,方法最后返回的是一个list,第一个元素是from点,第二个元素是包含中间点和to点的list,如果需要连线是贝塞尔曲线第二个元素应是包含3个元素的list,TWaver内部做了个识别
1
getLinkPoints:
function
() {
2
MyLinkUI.superClass.getLinkPoints.call(
this
);
3
4
var
f =
this
.getFromPoint();
5
var
t =
this
.getToPoint();
6
7
var
points =
new
twaver.List();
8
points.add(f);
9
points.add(t);
10
11
this
._lineLength = _twaver.math.calculateLineLength(points);
12
var
offset =
this
._lineLength/10;
13
var
m = {
14
x: (f.x+t.x)/2 + offset,
15
y: (f.y+t.y)/2 + offset,
16
}
17
var
cps =
new
twaver.List();
18
cps.add(m);
19
cps.add(t);
20
21
points.removeAt(1);
22
points.add(cps);
23
this
._linkPoints = points;
24
25
return
this
._linkPoints;
26
}
弹出菜单和信息板
弹出菜单使用TWaver的PopupMenu机制,轻松搞定,直接上代码
1
var
popupMenu =
new
twaver.controls.PopupMenu(network);
2
popupMenu.setMenuItems([
3
{ label:
'添加设备'
},
4
{ label:
'删除设备'
},
5
{ separator:
true
},
6
{ label:
'详细信息...'
},
7
]);
8
popupMenu.onMenuItemRendered =
function
(div, menuItem) {
9
div.childNodes[1].style[
'font-family'
]=
"'Microsoft Yahei', 'Open Sans',sans-serif"
;
10
div.childNodes[1].style[
'font-size'
]=
'12px'
;
11
};
信息板并不需要TWaver的机制,只需要监听network的事件,控制DOM就可以实现。可以每次生成一个div显示,也缓存一个div,通过CSS控制它的display属性,根据具体需求所定。这里缓存了一个div,根据点击的网元不同,修改div上的标题和图标
1
this
.network.addInteractionListener(
function
(e){
2
if
(e.kind ==
'clickElement'
&& e.element && e.element.getClassName() ==
'twaver.Node'
&& e.element.getName()){
3
var
titleImg = document.getElementById(
'titleImg'
);
4
var
ei = twaver.Util.getImageAsset(e.element.getImage())._cache;
5
titleImg.src = ei.toDataURL();
6
7
var
titleTxt = document.getElementById(
'titleTxt'
);
8
var
txt =
''
;
9
if
(e.element.getName()){
10
txt = e.element.getName();
11
}
12
titleTxt.innerHTML = txt;
13
var
s = dialog.style;
14
s.display =
'block'
;
15
s.left = e.event.x+
'px'
;
16
s.top = e.event.y+
'px'
;
17
}
else
{
18
dialog.style.display =
'none'
;
19
}
20
});
开头括弧中问题,大家肯定已经明白,指的是网元的图标发生了,是不是比以往更加漂亮了,感谢大家的支持。
- 被忽视的TWaver功能(1)
- 被忽视的TWaver功能(1)
- 【高手分享:主板易被忽视的三个功能】
- 被忽视的 Application
- 被忽视的大道理
- 被忽视的道理
- 被忽视的互联网
- 被忽视的中医学
- 被忽视的 Application
- 被忽视的mb_convert_encoding用法
- 被人忽视的intern
- 1384 被忽视的MM
- 被忽视的控件UIPageControl
- 被忽视的安全威胁
- 被忽视的预处理命令
- 容易被忽视的synchronized
- 被忽视的 partition 算法
- 被忽视的另一个vmlinux
- 添加 ico 图标
- 开始开发 Dashboard Widgets,第2章,读书笔记
- 有关于在Extjs4环境中,window窗口下的messageBox弹窗的bug以及解决方案
- 最好用的 Eclipse 插件收藏
- JAVA 大数(BigInteger) 归纳总结 .
- 被忽视的TWaver功能(1)
- 应用shellcode的简单示例
- Codeforces 363C. Fixing Typos
- 如何测试一个网页登陆界面--转
- 杨辉三角
- [转]Android 微信SDK分享功能中的最全过程步骤分析
- Codeforces Round #274 (Div. 2)——B、Towers
- 复活Java 前言
- 20 改进的冒泡排序--双向冒泡排序