关于前端:三维拓扑初学实战

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

最终成果如下图所示：

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