流程图控件GoJS教程：在链接上添加注释或修饰（下）

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.1发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

链接标签segmentOffset和alignmentFocus

给定标签对象的位置有两种方法，可以给定在由线段索引和小数距离指定的链接线段上的特定点的标签对象的位置。

所述GraphObject.segmentOffset属性控制，其中相对于所述点由所述确定的链路段对象位置GraphObject.segmentIndex和GraphObject.segmentFraction性质。偏移不是点的简单偏移，而是根据该链接段的角度旋转的。Y偏移量的正值可将标签元素移向链接的右侧，如沿链接方向所示。当然，Y偏移的负值会将其移向左侧。

  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, "left", { segmentOffset: new go.Point(0, -10) }),
      $(go.TextBlock, "right", { segmentOffset: new go.Point(0, 10) })
    );
  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);

如果将一个节点绕另一节点绕圈拖动，将看到“左”和“右”标签的位置。

更改有效偏移量的另一种方法是通过更改相对于链接线段点定位的对象中的点。您可以通过设置GraphObject.alignmentFocus来做到这一点，正如上面所看到的，默认值为Spot.Center。（其他Panel类型也使用GraphObject.alignmentFocus，这就是为什么其名称不以“ segment”开头的原因。）

  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, "left", { alignmentFocus: new go.Spot(1, 0.5, 3, 0) }),
      $(go.TextBlock, "right", { alignmentFocus: new go.Spot(0, 0.5, -3, 0) })
    );
  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);

但是，您可能想根据链接段的角度来控制各个标签的角度。

链接标签段的方向

所述GraphObject.segmentOrientation属性控制相对于所述连杆部分的角度的标签对象的角度。您可以使用几个可能的值。默认方向为Link.None，表示完全不旋转。 Link.OrientAlong通常用于使对象始终以与链接段相同的角度旋转。 Link.OrientUpright类似于“ OrientAlong”，但通常在标签中包含文本时使用，以使其更易于阅读。

  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, "left",
        { segmentOffset: new go.Point(0, -10),
          segmentOrientation: go.Link.OrientUpright }),
      $(go.TextBlock, "middle",
        { segmentOffset: new go.Point(0, 0),
          segmentOrientation: go.Link.OrientUpright }),
      $(go.TextBlock, "right",
        { segmentOffset: new go.Point(0, 10),
          segmentOrientation: go.Link.OrientUpright })
    );
  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);

现在，如果在节点上四处移动，您将始终能够读取标签文本，但是每个标签都停留在链接的预期侧，如沿链接方向所示。

这指出了0/1和1/0的segmentIndex / segmentFraction对之间的差异。尽管它们都指向同一点，但是与第一对关联的角度是第一段的角度（段0），而与第二对关联的角度是第二段的角度。

在末端附近链接标签

对于靠近链接两端的标签，将GraphObject.segmentOffset设置为Point（NaN，NaN）可能会很方便。这使偏移量是标签对象的宽度的一半和高度的一半。

  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, segmentOffset: new go.Point(NaN, NaN),
          segmentOrientation: go.Link.OrientUpright }),
      $(go.TextBlock, "to",
        { segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN),
          segmentOrientation: go.Link.OrientUpright })
    );
  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);

箭头

现在，您已经了解了用于控制Link中对象的位置和角度的GraphObject “ segment ...”属性，现在很容易说明如何定义箭头。箭头只是标签：以方便的方式初始化的Shape。

您可以在以下文件中看到所有内置箭头定义的副本：Arrowheads.js。

这是通过将Shape.toArrow设置为“ Standard” 来初始化箭头Shape的等效设置。

  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,
        // the following are the same as { toArrow: "Standard" }:
        { segmentIndex: -1,
          segmentOrientation: go.Link.OrientAlong,
          alignmentFocus: go.Spot.Right,
          geometry: go.Geometry.parse("F1 m0 0 l8 4  -8 4  2 -4 z") })
    );
  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);

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

想要购买GoJS正版授权的朋友可以。

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