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

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

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

点击下载GoJS最新试用版

建立连结

链路通常由链路的数据对象中的存在而产生GraphLinksModel.linkDataArray 或由母密钥参考作为值TreeModel.nodeParentKeyProperty在一个节点的数据对象的TreeModel中。用户可以使用LinkingTool：链接工具简介来绘制新链接。

您可以通过修改模型以编程方式创建新链接。通过调用GraphLinksModel.addLinkData 或调用TreeModel.setParentKeyForNodeData直接对模型进行操作是最常见的。显示模型的所有图均会观察到此类更改，以便它们可以自动创建相应的Link。您可以在示例中找到对GraphLinksModel.addLinkData的调用示例。

也可以通过调用LinkingTool.insertLink来创建新链接，而无需详细了解图的模型 。这就是用户绘制新链接的动作实际上是如何创建它的。这种方法知道如何修改GraphLinksModel或TreeModel的适当，同时遵守所提供的附加功能LinkingTool.archetypeLinkData 和其他性质LinkingTool。您可以在示例中找到对LinkingTool.insertLink的调用示例。

非定向链接

最简单的链接是没有箭头的链接，以指示视觉方向。关系实际上是无方向性的，或者方向在图表的组织中是隐含的。

模板仅包含Shape作为主要元素，作为节点之间绘制的线。计算完链接的路线后，主形状将基于该路线上的点获得几何形状。

  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,       // the whole link panel
      $(go.Shape)  // the link shape, default black stroke
    );
 
  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);

默认情况下，模型和图了解链接数据的节点数据引用的方式是通过查看其属性。如果要在链接数据上使用其他属性，则将GraphLinksModel.linkFromKeyProperty设置为导致节点数据键的属性的名称，并设置GraphLinksModel.linkToKeyProperty。

箭头

许多链接确实希望通过使用箭头来指示方向性。 GoJS使创建通用箭头变得容易：只需添加Shape并设置其Shape.toArrow属性即可。设置该属性将自动分配一个几何到Shape.geometry 并且使得箭头位于连杆的头部并以正确的方向指向将设置其他属性。当然，您可以设置其他Shape属性，例如Shape.fill，以自定义箭头的外观。

  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,
      $(go.Shape),  // the link shape
      $(go.Shape,   // the arrowhead
        { toArrow: "OpenTriangle", fill: null })
    );
 
  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);

您可以在“ 箭头示例”中看到所有预定义的箭头类型。

您还可以在链接的开头有一个箭头：设置Shape.fromArrow属性。请注意，箭头通常沿链接的路径移动，而不管其在路径上的位置如何，因此，就像使用实箭头一样，设置{ fromArrow: "TripleFeathers" }中的“羽毛”也指向前方。如果链接是双向的，则链接“从”端的箭头名称可能要以字符串“ Backward ...”开头。

路径

如果要自定义每个链接所采用的路径，则需要在链接上设置属性。对链接路线遵循的点影响最大的属性是Link.routing。

此示例显示两个最常见的路由值：Link.Normal（默认值）和Link.Orthogonal。

  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,
      new go.Binding("routing", "routing"),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "50 50" },
    { key: "Gamma", loc: "100 25" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", routing: go.Link.Normal },
    { from: "Alpha", to: "Gamma", routing: go.Link.Orthogonal }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

请注意，计算出的路线还取决于节点的属性，包括其形状。还有其他影响路由的属性，包括GraphObject.fromSpot和GraphObject.toSpot。有关景点的更多讨论，请阅读此介绍页面：链接连接点。此外，某些Layout在链接上设置属性，以根据布局的期望来控制其路由。

您还可以将Link.routing设置为Link.AvoidsNodes：

  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,
      { routing: go.Link.AvoidsNodes },  // link route should avoid nodes
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "250 40" },
    { key: "Gamma", loc: "100 0" },
    { key: "Delta", loc: "75 50" },
    { key: "Epsilon", loc: "150 30" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

如果以交互方式移动节点，则可以看到链接的路线如何调整以避免交叉节点。请注意，节点之间的小间隙可能不足以使链接通过。

如果某个节点非常靠近链接的Link.fromNode或Link.toNode或与之重叠， 并且会阻塞该链接的路由，则它将忽略该节点，将其视为只是已连接节点的扩展。同样，如果由于一个连接的节点周围有一个节点环而导致不存在避免节点的路由，则路由算法仍将放弃并穿越某些节点。

您可以通过将Node.avoidable设置为false 来声明可以通过节点进行路由。通常对Group进行此操作，以允许在组外部连接的链接在组内很好地路由。

请注意，使用避免节点路由的速度明显比正常的正交路由慢，尤其是对于大型图表。

端段长度

影响“正交”和“避免节点”路由采用的精确路由的另一种方法是设置或绑定 GraphObject.fromEndSegmentLength和GraphObject.toEndSegmentLength。这些属性确定了第一个片段或最后一个片段的长度，但仅适用于正交路由的链接。可以在节点的端口元素或链接上设置这些属性。在链接上，属性值优先于端口上相应属性的值。

  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,
      { routing: go.Link.Orthogonal, fromSpot: go.Spot.Left, toSpot: go.Spot.Right },
      new go.Binding("fromEndSegmentLength"),
      new go.Binding("toEndSegmentLength"),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" },
    { key: "Gamma", loc: "0 100" },
    { key: "Delta", loc: "100 150" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Gamma", to: "Delta", fromEndSegmentLength: 4, toEndSegmentLength: 30 },
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

=====================================================

想要购买GoJS正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼