流程圖控件GoJS教程：鏈接（上）

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

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

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

建立連結(jié)

鏈路通常由鏈路的數(shù)據(jù)對(duì)象中的存在而產(chǎn)生GraphLinksModel.linkDataArray 或由母密鑰參考作為值TreeModel.nodeParentKeyProperty在一個(gè)節(jié)點(diǎn)的數(shù)據(jù)對(duì)象的TreeModel中。用戶可以使用LinkingTool：鏈接工具簡介來繪制新鏈接。

您可以通過修改模型以編程方式創(chuàng)建新鏈接。通過調(diào)用GraphLinksModel.addLinkData 或調(diào)用TreeModel.setParentKeyForNodeData直接對(duì)模型進(jìn)行操作是最常見的。顯示模型的所有圖均會(huì)觀察到此類更改，以便它們可以自動(dòng)創(chuàng)建相應(yīng)的Link。您可以在示例中找到對(duì)GraphLinksModel.addLinkData的調(diào)用示例。

也可以通過調(diào)用LinkingTool.insertLink來創(chuàng)建新鏈接，而無需詳細(xì)了解圖的模型 。這就是用戶繪制新鏈接的動(dòng)作實(shí)際上是如何創(chuàng)建它的。這種方法知道如何修改GraphLinksModel或TreeModel的適當(dāng)，同時(shí)遵守所提供的附加功能LinkingTool.archetypeLinkData 和其他性質(zhì)LinkingTool。您可以在示例中找到對(duì)LinkingTool.insertLink的調(diào)用示例。

非定向鏈接

最簡單的鏈接是沒有箭頭的鏈接，以指示視覺方向。關(guān)系實(shí)際上是無方向性的，或者方向在圖表的組織中是隱含的。

模板僅包含Shape作為主要元素，作為節(jié)點(diǎn)之間繪制的線。計(jì)算完鏈接的路線后，主形狀將基于該路線上的點(diǎn)獲得幾何形狀。

  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,       // the whole link panel
      $(go.Shape)  // the link shape, default black stroke
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

默認(rèn)情況下，模型和圖了解鏈接數(shù)據(jù)的節(jié)點(diǎn)數(shù)據(jù)引用的方式是通過查看其屬性。如果要在鏈接數(shù)據(jù)上使用其他屬性，則將GraphLinksModel.linkFromKeyProperty設(shè)置為導(dǎo)致節(jié)點(diǎn)數(shù)據(jù)鍵的屬性的名稱，并設(shè)置GraphLinksModel.linkToKeyProperty。

箭頭

許多鏈接確實(shí)希望通過使用箭頭來指示方向性。 GoJS使創(chuàng)建通用箭頭變得容易：只需添加Shape并設(shè)置其Shape.toArrow屬性即可。設(shè)置該屬性將自動(dòng)分配一個(gè)幾何到Shape.geometry 并且使得箭頭位于連桿的頭部并以正確的方向指向?qū)⒃O(shè)置其他屬性。當(dāng)然，您可以設(shè)置其他Shape屬性，例如Shape.fill，以自定義箭頭的外觀。

  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),  // the link shape
      $(go.Shape,   // the arrowhead
        { toArrow: "OpenTriangle", fill: null })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

您可以在“ 箭頭示例”中看到所有預(yù)定義的箭頭類型。

您還可以在鏈接的開頭有一個(gè)箭頭：設(shè)置Shape.fromArrow屬性。請(qǐng)注意，箭頭通常沿鏈接的路徑移動(dòng)，而不管其在路徑上的位置如何，因此，就像使用實(shí)箭頭一樣，設(shè)置{ fromArrow: "TripleFeathers" }中的“羽毛”也指向前方。如果鏈接是雙向的，則鏈接“從”端的箭頭名稱可能要以字符串“ Backward ...”開頭。

路徑

如果要自定義每個(gè)鏈接所采用的路徑，則需要在鏈接上設(shè)置屬性。對(duì)鏈接路線遵循的點(diǎn)影響最大的屬性是Link.routing。

此示例顯示兩個(gè)最常見的路由值：Link.Normal（默認(rèn)值）和Link.Orthogonal。

  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,
      new go.Binding("routing", "routing"),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "50 50" },
    { key: "Gamma", loc: "100 25" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", routing: go.Link.Normal },
    { from: "Alpha", to: "Gamma", routing: go.Link.Orthogonal }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

請(qǐng)注意，計(jì)算出的路線還取決于節(jié)點(diǎn)的屬性，包括其形狀。還有其他影響路由的屬性，包括GraphObject.fromSpot和GraphObject.toSpot。有關(guān)景點(diǎn)的更多討論，請(qǐng)閱讀此介紹頁面：鏈接連接點(diǎn)。此外，某些Layout在鏈接上設(shè)置屬性，以根據(jù)布局的期望來控制其路由。

您還可以將Link.routing設(shè)置為Link.AvoidsNodes：

  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.AvoidsNodes },  // link route should avoid nodes
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "250 40" },
    { key: "Gamma", loc: "100 0" },
    { key: "Delta", loc: "75 50" },
    { key: "Epsilon", loc: "150 30" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

如果以交互方式移動(dòng)節(jié)點(diǎn)，則可以看到鏈接的路線如何調(diào)整以避免交叉節(jié)點(diǎn)。請(qǐng)注意，節(jié)點(diǎn)之間的小間隙可能不足以使鏈接通過。

如果某個(gè)節(jié)點(diǎn)非?？拷溄拥腖ink.fromNode或Link.toNode或與之重疊， 并且會(huì)阻塞該鏈接的路由，則它將忽略該節(jié)點(diǎn)，將其視為只是已連接節(jié)點(diǎn)的擴(kuò)展。同樣，如果由于一個(gè)連接的節(jié)點(diǎn)周圍有一個(gè)節(jié)點(diǎn)環(huán)而導(dǎo)致不存在避免節(jié)點(diǎn)的路由，則路由算法仍將放棄并穿越某些節(jié)點(diǎn)。

您可以通過將Node.avoidable設(shè)置為false 來聲明可以通過節(jié)點(diǎn)進(jìn)行路由。通常對(duì)Group進(jìn)行此操作，以允許在組外部連接的鏈接在組內(nèi)很好地路由。

請(qǐng)注意，使用避免節(jié)點(diǎn)路由的速度明顯比正常的正交路由慢，尤其是對(duì)于大型圖表。

端段長度

影響“正交”和“避免節(jié)點(diǎn)”路由采用的精確路由的另一種方法是設(shè)置或綁定 GraphObject.fromEndSegmentLength和GraphObject.toEndSegmentLength。這些屬性確定了第一個(gè)片段或最后一個(gè)片段的長度，但僅適用于正交路由的鏈接。可以在節(jié)點(diǎn)的端口元素或鏈接上設(shè)置這些屬性。在鏈接上，屬性值優(yōu)先于端口上相應(yīng)屬性的值。

  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, fromSpot: go.Spot.Left, toSpot: go.Spot.Right },
      new go.Binding("fromEndSegmentLength"),
      new go.Binding("toEndSegmentLength"),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" },
    { key: "Gamma", loc: "0 100" },
    { key: "Delta", loc: "100 150" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Gamma", to: "Delta", fromEndSegmentLength: 4, toEndSegmentLength: 30 },
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

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

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

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