流程图控件GoJS教程：节点上的链接连接点（下）

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

GoJS现已更新至最新版本2.1发布，添加了动画功能，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

无向斑点

如果没有为GraphObject.fromSpot或GraphObject.toSpot指定点，则路由计算将计算从端口中心到另一个端口（即端口边缘的相交点）的链路的最远点。上面在非矩形节点中对此进行了演示，并在此处再次进行了演示。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "YinYang",
        {
          fill: "white", portId: ""
        },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8 },
        new go.Binding("text"))
    );
  diagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", loc: "0 50" },
      { key: 2, text: "Beta", color: "orange", loc: "150 0" },
      { key: 3, text: "Gamma", color: "lightgreen", loc: "300 50" }
    ],
    [
      { from: 1, to: 2 },
      { from: 2, to: 3 }
    ]);

但是，可以指定与端口中心不同的对焦点。使用Spot.x和Spot.y等于0.5 的Spot值，但Spot.offsetX和Spot.offsetY 值指定相对于端口中心，链接要指向的位置。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "YinYang",
        {
          fill: "white", portId: "",
          fromSpot: new go.Spot(0.5, 0.5, 0, -25), toSpot: new go.Spot(0.5, 0.5, 0, 25)
        },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8 },
        new go.Binding("text"))
    );
 
  diagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", loc: "0 50" },
      { key: 2, text: "Beta", color: "orange", loc: "150 0" },
      { key: 3, text: "Gamma", color: "lightgreen", loc: "300 50" }
    ],
    [
      { from: 1, to: 2 },
      { from: 2, to: 3 }
    ]);

在此示例中，链接似乎总是从“ YinYang”图形顶部附近的孔向图形底部附近的点发出。尝试移动节点以查看此行为。请注意，Spot.x和Spot.y值均为0.5，与端口中心的偏移量固定。

也有可能使链接直接到达端口内的特定位置。使用常规Spot值，但将Link的末段长度设置为零， Link.fromEndSegmentLength或Link.toEndSegmentLength。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "YinYang",
        {
          fill: "white", portId: "",
          fromSpot: new go.Spot(0.5, 0.25), toSpot: new go.Spot(0.5, 0.75),
          fromEndSegmentLength: 0, toEndSegmentLength: 0
        },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8 },
        new go.Binding("text"))
    );
 
  diagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", loc: "0 50" },
      { key: 2, text: "Beta", color: "orange", loc: "150 0" },
      { key: 3, text: "Gamma", color: "lightgreen", loc: "300 50" }
    ],
    [
      { from: 1, to: 2 },
      { from: 2, to: 3 }
    ]);

同样，链接似乎总是从“ YinYang”图形顶部附近的孔朝向图形底部附近的点的方向延伸，但是现在它们一直沿途而不是停在边缘。请注意，Spot.x和Spot.y值都不都是0.5，并且链接端段的长度是零。

各个链接的属性

设置GraphObject.fromSpot和GraphObject.toSpot属性为连接到节点的所有链接指定默认链接连接点。如果您希望某些链接转到同一节点的中上点，但又有些链接指向同一节点的左中点，该怎么办？您可以通过设置Link.fromSpot和Link.toSpot属性来实现此目的，这些属性优先于链接所连接的内容的相应命名的属性。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      // get the link spots from the link data
      new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
      new go.Binding("toSpot", "toSpot", go.Spot.parse),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", fromSpot: "TopRight", toSpot: "Left" },
    { from: "Alpha", to: "Gamma", fromSpot: "Left", toSpot: "Left" },
    { from: "Alpha", to: "Delta", fromSpot: "None", toSpot: "Top" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

一些布局设置了链接点

当布局的性质暗示自然方向时， 某些预定义的Layout会自动设置Link.fromSpot和Link.toSpot。因此，例如，具有TreeLayout.angle的TreeLayout == 90会将每个Link的fromSpot设置为Spot.Bottom，将每个Link的toSpot设置为Spot.Top。

您可以通过将TreeLayout.setsPortSpot和/或TreeLayout.setsChildPortSpot设置为false 来禁用TreeLayout的链接点设置。对于LayeredDigraphLayout，将LayeredDigraphLayout.setsPortSpots设置为false。对于ForceDirectedLayout，将ForceDirectedLayout.setsPortSpots设置为false，尽管很少需要这样做。

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

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

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