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

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

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

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

鏈接標(biāo)簽segmentOffset和alignmentFocus

給定標(biāo)簽對(duì)象的位置有兩種方法，可以給定在由線段索引和小數(shù)距離指定的鏈接線段上的特定點(diǎn)的標(biāo)簽對(duì)象的位置。

所述GraphObject.segmentOffset屬性控制，其中相對(duì)于所述點(diǎn)由所述確定的鏈路段對(duì)象位置GraphObject.segmentIndex和GraphObject.segmentFraction性質(zhì)。偏移不是點(diǎn)的簡(jiǎn)單偏移，而是根據(jù)該鏈接段的角度旋轉(zhuǎn)的。Y偏移量的正值可將標(biāo)簽元素移向鏈接的右側(cè)，如沿鏈接方向所示。當(dāng)然，Y偏移的負(fù)值會(huì)將其移向左側(cè)。

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

如果將一個(gè)節(jié)點(diǎn)繞另一節(jié)點(diǎn)繞圈拖動(dòng)，將看到“左”和“右”標(biāo)簽的位置。

更改有效偏移量的另一種方法是通過(guò)更改相對(duì)于鏈接線段點(diǎn)定位的對(duì)象中的點(diǎn)。您可以通過(guò)設(shè)置GraphObject.alignmentFocus來(lái)做到這一點(diǎn)，正如上面所看到的，默認(rèn)值為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);

但是，您可能想根據(jù)鏈接段的角度來(lái)控制各個(gè)標(biāo)簽的角度。

鏈接標(biāo)簽段的方向

所述GraphObject.segmentOrientation屬性控制相對(duì)于所述連桿部分的角度的標(biāo)簽對(duì)象的角度。您可以使用幾個(gè)可能的值。默認(rèn)方向?yàn)長(zhǎng)ink.None，表示完全不旋轉(zhuǎn)。 Link.OrientAlong通常用于使對(duì)象始終以與鏈接段相同的角度旋轉(zhuǎn)。 Link.OrientUpright類似于“ OrientAlong”，但通常在標(biāo)簽中包含文本時(shí)使用，以使其更易于閱讀。

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

現(xiàn)在，如果在節(jié)點(diǎn)上四處移動(dòng)，您將始終能夠讀取標(biāo)簽文本，但是每個(gè)標(biāo)簽都停留在鏈接的預(yù)期側(cè)，如沿鏈接方向所示。

這指出了0/1和1/0的segmentIndex / segmentFraction對(duì)之間的差異。盡管它們都指向同一點(diǎn)，但是與第一對(duì)關(guān)聯(lián)的角度是第一段的角度（段0），而與第二對(duì)關(guān)聯(lián)的角度是第二段的角度。

在末端附近鏈接標(biāo)簽

對(duì)于靠近鏈接兩端的標(biāo)簽，將GraphObject.segmentOffset設(shè)置為Point（NaN，NaN）可能會(huì)很方便。這使偏移量是標(biāo)簽對(duì)象的寬度的一半和高度的一半。

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

箭頭

現(xiàn)在，您已經(jīng)了解了用于控制Link中對(duì)象的位置和角度的GraphObject “ segment ...”屬性，現(xiàn)在很容易說(shuō)明如何定義箭頭。箭頭只是標(biāo)簽：以方便的方式初始化的Shape。

您可以在以下文件中看到所有內(nèi)置箭頭定義的副本：Arrowheads.js。

這是通過(guò)將Shape.toArrow設(shè)置為“ Standard” 來(lái)初始化箭頭Shape的等效設(shè)置。

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

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。

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