当初有很多的二维拓扑解决方案,开源的和商业的都有。不过在三维拓扑这块,确业余的组件很少。这次,我给大家介绍一款业余的三维拓扑软件,图意三维拓扑 (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);
最终成果如下图所示:
默认状况下,能够通过鼠标点击选中元素,通过鼠标拖拽拖动元素挪动地位。