当初有很多的二维拓扑解决方案，开源的和商业的都有。 不过在三维拓扑这块，确业余的组件很少。 这次，我给大家介绍一款业余的三维拓扑软件，图意三维拓扑(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)。

<script type="text/javascript" src="../eg.js"></script>

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

  • 新曾一个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);

最终成果如下图所示：

默认状况下，能够通过鼠标点击选中元素，通过鼠标拖拽拖动元素挪动地位。