被忽视的TWaver功能（1）

最新推荐文章于 2023-07-13 10:18:33 发布

原创

最新推荐文章于 2023-07-13 10:18:33 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客分享了如何利用TWaver解析JSON数据生成网元和连线，介绍如何在网元右下角添加标识小图标，以及如何实现二次曲线的连线效果。此外，还提到了弹出菜单和信息板的实现方法。

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