被忽视的TWaver功能（1）

最新推荐文章于 2022-04-19 18:10:36 发布

TWaver数字孪生

最新推荐文章于 2022-04-19 18:10:36 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/twaver/article/details/40039997

版权

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

摘要由CSDN通过智能技术生成

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