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

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

GoJS現(xiàn)已更新至最新版本2.0.17發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗(yàn)，趕快下載試試吧~

點(diǎn)擊下載GoJS最新試用版

鏈接上的標(biāo)簽

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

簡(jiǎn)單鏈接標(biāo)簽

默認(rèn)情況下，如果將GraphObject添加到Link，它將位于鏈接的中間。在此示例中，我們僅將TextBlock添加到鏈接，并將其TextBlock.text屬性綁定到鏈接數(shù)據(jù)的“ 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);

請(qǐng)注意，單擊文本標(biāo)簽將導(dǎo)致選擇整個(gè)鏈接。

雖然使用TextBlock作為鏈接標(biāo)簽是很平常的事，但是它可以是任何GraphObject， ;例如Shape或任意復(fù)雜的Panel。這是一個(gè)簡(jiǎn)單的面板標(biāo)簽：

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

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

鏈接標(biāo)簽segmentIndex和segmentFraction

設(shè)置GraphObject.segmentIndex屬性，以指定對(duì)象應(yīng)位于鏈接路線的哪一部分。設(shè)置GraphObject.segmentFraction屬性以控制對(duì)象應(yīng)該走多遠(yuǎn)，以從段的開頭（零）到段的結(jié)尾（一）的分?jǐn)?shù)表示。

如果鏈接來(lái)自不具有GraphObject.fromSpot的節(jié)點(diǎn)（即Spot.None）并到達(dá)不具有GraphObject.toSpot的節(jié)點(diǎn)，則鏈接中可能只有一個(gè)段，段號(hào)為零。

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

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

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

但是，您也可以從鏈接的“到”端向后計(jì)數(shù)段。-1是最后一個(gè)分段，-2是倒數(shù)第二個(gè)分段，依此類推。當(dāng)您使用負(fù)分段索引時(shí)，分段分?jǐn)?shù)從最接近“ to”端的0變?yōu)樵摲侄沃凶羁亢蟮囊欢说?。沿從“到”端的路線。因此，segmentIndex為-1，segmentFraction為0的點(diǎn)是鏈接路由的終點(diǎn)。segmentIndex為-1且segmentFraction為1的segmentIndex與segmentIndex -2和segmentFraction 0相同。

對(duì)于屬于鏈接“至”端附近的標(biāo)簽，通常對(duì)GraphObject.segmentIndex使用負(fù)值。當(dāng)鏈接中的段數(shù)未知或可能變化時(shí)，此約定效果更好。

**關(guān)于鏈接上的標(biāo)簽更多教程，歡迎關(guān)注后續(xù)教程

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼