应客户需求写个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里这个很easy，使用网元自带的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';
|
开头括弧中问题，大家肯定已经明确。指的是网元的图标发生了。是不是比以往更加美丽了，感谢大家的支持。
本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5143132.html，如需转载请自行联系原作者
