logo GoJS教程 2019 我也要发布文档

节点上的链接连接点(上)


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

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

点击下载GoJS最新试用版

节点上的链接连接点

可以灵活地精确控制链接连接到节点的方式和位置。在前面的示例中,链接始终在节点的边缘结束。但是,您可以在链接终止的节点上指定Spot。

非矩形节点

当节点不具有矩形形状时,默认情况下,链接将在指向节点中心的线与节点边缘相交的地方结束。

这是一个演示-拖动其中一个节点,观察链接如何始终连接到最近的交叉点或节点的中心。该示例在链接的两端都包括箭头,以明确表明链接路由实际上恰好在节点的边缘结束。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { width: 90, height: 90,
        selectionAdorned: false },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "FivePointedStar", { fill: "lightgray" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape,   // the "from" end arrowhead
        { fromArrow: "Chevron" }),
      $(go.Shape,   // the "to" end arrowhead
        { toArrow: "StretchedDiamond", fill: "red" })
    );
 
  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);

流程图控件GoJS教程:节点上的链接连接点(上)

ToSpot和FromSpot

您可以轻松地要求链接在节点范围内的特定点处结束,而不是在最近的边缘相交处结束。将GraphObject.toSpot设置为Spot.None以外的Spot值, 以使进入节点的链接终止于节点内的该点,其方向适合于该点所在的一侧。同样,将GraphObject.fromSpot设置为从节点出来的链接的末端。

以下示例均显示相同的图,但使用不同的模板来演示链接如何连接到节点。他们都调用此通用函数来定义一些节点和链接。

function makeGraph(diagram) {
  var $ = go.GraphObject.make;
 
  diagram.layout =
    $(go.LayeredDigraphLayout,  // this will be discussed in a later section
      { columnSpacing: 5,
        setsPortSpots: false });
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
  ];
  var linkDataArray = [
    { from: "Beta", to: "Alpha" },
    { from: "Gamma", to: "Alpha" },
    { from: "Delta", to: "Alpha" },
    { from: "Alpha", to: "Epsilon" },
    { from: "Alpha", to: "Zeta" },
    { from: "Alpha", to: "Eta" },
    { from: "Alpha", to: "Theta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}

让我们指定进入节点的链接在左侧的中间连接,而离开节点的链接在右侧的中间连接。这种约定适用于对它们具有一般方向感的图,例如下图从左到右。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.Right,  // coming out from middle-right
        toSpot: go.Spot.Left },   // going into at middle-left
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);

流程图控件GoJS教程:节点上的链接连接点(上)

您还可以指定链接不进入单个节点而是沿一侧展开。代替Spot.Right使用Spot.RightSide,并且类似地用于左侧。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.RightSide,  // coming out from right side
        toSpot: go.Spot.LeftSide },   // going into at left side
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);

流程图控件GoJS教程:节点上的链接连接点(上)

当然,只有当节点基本上是矩形时,这才看起来不错。

您可以使用另一种Link.routing:

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.RightSide,  // coming out from right side
        toSpot: go.Spot.LeftSide },   // going into at left side
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal,  // Orthogonal routing
        corner: 10 },                 // with rounded corners
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);

流程图控件GoJS教程:节点上的链接连接点(上)

或者,您可以使用另一种Link.curve:

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.RightSide,  // coming out from right side
        toSpot: go.Spot.LeftSide },   // going into at left side
      $(go.Shape, "Rectangle", { 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" })
    );
 
  makeGraph(diagram);

流程图控件GoJS教程:节点上的链接连接点(上)

但是您需要谨慎指定图形的排列方式。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { fromSpot: go.Spot.TopSide,    // coming out from top side -- BAD!
        toSpot: go.Spot.RightSide },  // going into at right side -- BAD!
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5},
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  makeGraph(diagram);
 
  diagram.add($(go.Part,  // this is just a comment
                { location: new go.Point(300, 50) },
                $(go.TextBlock, "Bad Spots",
                  { font: "16pt bold", stroke: "red" })
              ));

流程图控件GoJS教程:节点上的链接连接点(上)

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

想要购买GoJS正版授权的朋友可以咨询慧都官方客服

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

流程图控件GoJS教程:节点上的链接连接点(上)