流程圖控件GoJS教程：節點上的鏈接連接點（上）

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

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

您還可以指定鏈接不進入單個節點而是沿一側展開。代替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);

當然，只有當節點基本上是矩形時，這才看起來不錯。

您可以使用另一種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);

或者，您可以使用另一種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);

但是您需要謹慎指定圖形的排列方式。

  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正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼