流程圖控件GoJS教程：在鏈接上添加注釋或修飾（上）

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS現已更新至最新版本2.0.17發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

鏈接上的標簽

通常在鏈接（尤其是文本）上添加注釋或修飾。

簡單鏈接標簽

默認情況下，如果將GraphObject添加到Link，它將位于鏈接的中間。在此示例中，我們僅將TextBlock添加到鏈接，并將其TextBlock.text屬性綁定到鏈接數據的“ text”屬性。

  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),                           // this is the link shape (the line)
      $(go.Shape, { toArrow: "Standard" }),  // this is an arrowhead
      $(go.TextBlock,                        // this is a Link label
        new go.Binding("text", "text"))
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", text: "a label" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

請注意，單擊文本標簽將導致選擇整個鏈接。

雖然使用TextBlock作為鏈接標簽是很平常的事，但是它可以是任何GraphObject， 例如Shape或任意復雜的Panel。這是一個簡單的面板標簽：

  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),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.Panel, "Auto",  // this whole Panel is a link label
        $(go.Shape, "TenPointedStar", { fill: "yellow", stroke: "gray" }),
        $(go.TextBlock, { margin: 3 },
          new go.Binding("text", "text"))
      )
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", text: "hello!" }  // added information for link label
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

如果鏈接是正交路由或貝塞爾曲線，這也可以工作。

  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 },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.TextBlock, { textAlign: "center" },  // centered multi-line text
        new go.Binding("text", "text"))
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", text: "a label\non an\northo link" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

盡管將標簽放置在鏈接的中間是默認行為，但是您可以設置以“ segment”開頭的GraphObject屬性，以指定確切位置以及如何沿鏈接路徑布置對象。

鏈接標簽segmentIndex和segmentFraction

設置GraphObject.segmentIndex屬性，以指定對象應位于鏈接路線的哪一部分。設置GraphObject.segmentFraction屬性以控制對象應該走多遠，以從段的開頭（零）到段的結尾（一）的分數表示。

如果鏈接來自不具有GraphObject.fromSpot的節點（即Spot.None）并到達不具有GraphObject.toSpot的節點，則鏈接中可能只有一個段，段號為零。

  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),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.TextBlock, "from", { segmentIndex: 0, segmentFraction: 0.2 }),
      $(go.TextBlock, "mid", { segmentIndex: 0, segmentFraction: 0.5 }),
      $(go.TextBlock, "to", { segmentIndex: 0, segmentFraction: 0.8 })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

如果鏈接中有許多段，則需要指定不同的段號。例如，正交鏈接通常在路線中有6個點，這意味著從0到4編號為5個路段。

  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 },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.TextBlock, "from", { segmentIndex: 1, segmentFraction: 0.5 }),
      $(go.TextBlock, "mid", { segmentIndex: 2, segmentFraction: 0.5 }),
      $(go.TextBlock, "to", { segmentIndex: 3, segmentFraction: 0.5 })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

但是，您也可以從鏈接的“到”端向后計數段。-1是最后一個分段，-2是倒數第二個分段，依此類推。當您使用負分段索引時，分段分數從最接近“ to”端的0變為該分段中最靠后的一端的1。沿從“到”端的路線。因此，segmentIndex為-1，segmentFraction為0的點是鏈接路由的終點。segmentIndex為-1且segmentFraction為1的segmentIndex與segmentIndex -2和segmentFraction 0相同。

對于屬于鏈接“至”端附近的標簽，通常對GraphObject.segmentIndex使用負值。當鏈接中的段數未知或可能變化時，此約定效果更好。

**關于鏈接上的標簽更多教程，歡迎關注后續教程

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

想要購買GoJS正版授權的朋友可以。

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