首页 > 其他好文 > 详细

被忽视的TWaver功能（1）

时间：2014-10-13 12:31:50 阅读：333 评论：0 收藏：0 [点我收藏+]

标签：des style blog http color io os 使用 ar

应客户需求写个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

});