Posted on 2014-10-13 09:35
TWaver 阅读(5983)
评论(2) 编辑 收藏
应客户需求写个Demo,Demo中包含一些常用的功能,包括解析JSON数据生成TWaver中的网元和连线,网元右下角带上不同标识的小图标,连线需要是二次曲线,弹出菜单和信息板,跟大家分享下。先上图让大家看看效果(大家在学习的同时,能否发现这次Demo有所不同)
解析JSON数据生成TWaver中的网元和连线
下面是Demo中用到的JSON数据格式样例
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" } |
根据element判断创建何种对象,是网元还是连线;image设置网元图片的名称(这些图片都是事先需要注册,如果使用TWaver内置的图片,则不需要,直接使用TWaver的图片注册名称即可,例如twaver.Defaults.IMAGE_GROUP),icon设置网元上的标识,arrow设置连线的箭头方向,下面上代码
1 | function createElement(item){ |
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); |
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 ); |
14 | if (item.element == 'node' ){ |
15 | var node = new twaver.Node(item.id); |
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); |
22 | node.setStyle( 'icons.names' , [item.icon]); |
23 | node.setStyle( 'icons.position' , 'bottomright.topleft' ); |
25 | node.setStyle( 'shadow.blur' ,10); |
26 | node.setStyle( 'shadow.xoffset' ,5); |
27 | node.setStyle( 'shadow.yoffset' ,5); |
33 | element.setStyle( 'label.font' , '11px "Microsoft Yahei"' ); |
34 | element.setName(item.name); |
网元右下角带上不同标识的小图标
在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 ); |
4 | var f = this .getFromPoint(); |
5 | var t = this .getToPoint(); |
7 | var points = new twaver.List(); |
11 | this ._lineLength = _twaver.math.calculateLineLength(points); |
12 | var offset = this ._lineLength/10; |
14 | x: (f.x+t.x)/2 + offset, |
15 | y: (f.y+t.y)/2 + offset, |
17 | var cps = new twaver.List(); |
23 | this ._linkPoints = points; |
25 | return this ._linkPoints; |
弹出菜单和信息板
弹出菜单使用TWaver的PopupMenu机制,轻松搞定,直接上代码
1 | var popupMenu = new twaver.controls.PopupMenu(network); |
2 | popupMenu.setMenuItems([ |
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' ; |
信息板并不需要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(); |
7 | var titleTxt = document.getElementById( 'titleTxt' ); |
9 | if (e.element.getName()){ |
10 | txt = e.element.getName(); |
12 | titleTxt.innerHTML = txt; |
15 | s.left = e.event.x+ 'px' ; |
16 | s.top = e.event.y+ 'px' ; |
18 | dialog.style.display = 'none' ; |
开头括弧中问题,大家肯定已经明白,指的是网元的图标发生了,是不是比以往更加漂亮了,感谢大家的支持。