流程图控件GoJS教程：链接（下）

GoJS是一款功能强大，快速且轻量级的流程图控件。本教程将为您介绍使用Link类可实现节点之间的可视关系。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.0.17发布，修复了一些bug，增强用户体验，赶快下载试试吧~

GoJS最新试用版

曲线，弯曲度，转角

一旦Link.routing确定了链接采用的路线（即点的顺序），其他属性将控制有关链接形状如何获取其路径几何的详细信息。第一个这样的属性是Link.curve，它控制链接形状是基本上是直线段还是大曲线。

为默认值Link.curve是Link,None，产生链接的形状有直线段正如你看到的上面。

Link，Bezier的值会为链接形状生成自然弯曲的路径。

  diagram.nodeTemplate =    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),      $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),      $(go.TextBlock, { margin: 5 },        new go.Binding("text", "key"))    );   diagram.linkTemplate =    $(go.Link,      { curve: go.Link.Bezier },  // Bezier curve      $(go.Shape),      $(go.Shape, { toArrow: "Standard" })    );   var nodeDataArray = [    { key: "Alpha", loc: "0 0" },    { key: "Beta", loc: "100 50" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

标签：

来源：慧都