三维拓扑初学实战

现在有很多的二维拓扑解决方案，开源的和商业的都有。 不过在三维拓扑这块，确专业的组件很少。 这次，我给大家介绍一款专业的三维拓扑软件，图意三维拓扑(EasyGraph)。

基本概念

EasyGraph使用HTML5和JavaScript语音，底层使用webgl技术，可以在支持webgl的浏览器上进行绘图。

使用EasyGraph前，需熟悉几个基本概念：图元（TData）、容器（DataModel）和画布（TGraph）。

• 图元：图形中的各种基本元素，如节点（TNode）、连线（TLink）等；
• 容器：图元都统一放置在一个容器（DataModel）中进行管理，如同“装鸡蛋的篮子”一样。它负责图元的增/删/改/查等管理操作；
• 画布：图元最终都绘制在画布（TGraph）组件上。TGraph是最终用户看到的图形组件，负责图形画面的具体绘制和交互；

EasyGraph是一个MVVM开发，其中M代表了图元和容器部分，V代表了TGraph部分。

拓扑主要元素介绍

一般来说拓扑主要的元素就是节点和连线，除此之外还包括一些分组，子网等支持展开合并，钻取逻辑的元素。 EasyTopo，包括以下主要的元素：

画布类元素

• TGraph 展示三维拓扑的画布

  数据类元素

• TData 是所有
• TNode 拓扑节点元素
• TLink 拓扑连线元素
• TGroup 拓扑图的分组元素，分组可以包括其他元素，支持合并展开功能。
• TSubnet 拓扑图的子网元素，子网元素可以包括其他元素，支持拓扑钻取功能。
• TLayer 拓扑图弹出层元素，弹出层元素可以包括其他元素，支持分层展示和弹出功能。
• DataModel 数据容器，所有的数据类元素，需要添加到数据容器才能生效。

Hello Topo

要使用EasyGraph,首先需要引入EasyTopo的开发SDK(eg.js,eg表示EasyGraph)。

绘制三维拓扑主要步骤如下：

• 新曾一个DataModel对象
• 新增一个TGraph对象
• 新增节点连线等元素到DataModel中

下面代码是绘制两点一线的一个例子：

  const dataModel = new eg.DataModel();
  const graph = new eg.TGraph(dataModel, {
    canvas: document.getElementById("canvas")
  });

  let node1 = new eg.TNode({image: "./images/convergence.png"});
  node1.setName("node1");
  node1.p(-200, 100, 0);
  let node2 = new eg.TNode({image: "./images/convergence.png"});
  node2.setName("node2");
  node2.p(200, -100, 0);
  let link = new eg.TLink(node1,node2);
  dataModel.add(node1);
  dataModel.add(node2);
  dataModel.add(link);

最终效果如下图所示：

默认情况下，可以通过鼠标点击选中元素，通过鼠标拖拽拖动元素移动位置。