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

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