乐趣区

关于前端:三维拓扑元素介绍之TLink

上一篇介绍了节点 TNode,本篇介绍 TLink,TLink 示意连贯关系。

TLink

TLink 示意两个节点之间的连贯关系。它的结构如下:

let link = new eg.TLink(fromNode,toNode);

其中 fromNode 示意起始节点,toNode 示意完结节点。

上面是简略的示例:

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);

最终的显示成果如下图所示:

连线的类型

连线默认是直线,通过指定连线类型,还能够结构其余模式的连线。次要包含如下类型:

  • linear 默认类型 示意直线
  • orthogonal.x
  • orthogonal.x.n
  • orthogonal.y
  • orthogonal.y.n
  • orthogonal.z
  • orthogonal.z.n
  • flex.x
  • flex.x.n
  • flex.y
  • flex.y.n
  • flex.z
  • flex.z.n

通过 setStyle 能够指定连线的类型,代码如下所示:

link.setStyle("link.type","orthogonal.x");

其中 orthogonal 类型示意正交的连线类型,如下图所示,示意“orthogonal.x”:


示意正交的成果,其中 orthogonal.x 示意从头 fromNode 到 toNode 先沿着 x 方向,在沿着 y 方向,最初沿着 z 方向后退,orthogonal.x.n 示意从头 fromNode 到 toNode 先沿着 x 方向,在沿着 z 方向,最初沿着 y 方向后退.orthogonal.y 示意从头 fromNode 到 toNode 先沿着 y 方向,在沿着 z 方向,最初沿着 x 方向后退。依此类推。

flex 类型也是正交的成果,不过先到两个节点的中心点。如下图所示,示意“flex.x”:

相干的规定和 orthogonal 系列相似。其中 flex.x 示意从头 fromNode 到 toNode 先沿着 x 方向,在沿着 y 方向,最初沿着 z 方向后退,flex.x.n 示意从头 fromNode 到 toNode 先沿着 x 方向,在沿着 z 方向,最初沿着 y 方向后退. 依此类推。

总结

本文介绍了 TLink 的构造方法,并介绍了 TLink 的各种类型。通过文中的各种类型,能够满足绝大多数的结构须要。

欢送关注公众号:” 图易可视化 ”。

退出移动版