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

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