流程圖控件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正版授權的朋友可以。

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