流程圖控件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)，趕快下載試試吧~
建立連結(jié)
鏈路通常由鏈路的數(shù)據(jù)對象中的存在而產(chǎn)生GraphLinksModel.linkDataArray 或由母密鑰參考作為值TreeModel.nodeParentKeyProperty在一個(gè)節(jié)點(diǎn)的數(shù)據(jù)對象的TreeModel中。用戶可以使用LinkingTool：鏈接工具簡介來繪制新鏈接。
您可以通過修改模型以編程方式創(chuàng)建新鏈接。通過調(diào)用GraphLinksModel.addLinkData 或調(diào)用TreeModel.setParentKeyForNodeData直接對模型進(jìn)行操作是最常見的。顯示模型的所有圖均會(huì)觀察到此類更改，以便它們可以自動(dòng)創(chuàng)建相應(yīng)的Link。您可以在示例中找到對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。您可以在示例中找到對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屬性。請注意，箭頭通常沿鏈接的路徑移動(dòng)，而不管其在路徑上的位置如何，因此，就像使用實(shí)箭頭一樣，設(shè)置{ fromArrow: "TripleFeathers" }中的“羽毛”也指向前方。如果鏈接是雙向的，則鏈接“從”端的箭頭名稱可能要以字符串“ Backward ...”開頭。
路徑
如果要自定義每個(gè)鏈接所采用的路徑，則需要在鏈接上設(shè)置屬性。對鏈接路線遵循的點(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);
請注意，計(jì)算出的路線還取決于節(jié)點(diǎn)的屬性，包括其形狀。還有其他影響路由的屬性，包括GraphObject.fromSpot和GraphObject.toSpot。有關(guān)景點(diǎn)的更多討論，請閱讀此介紹頁面：鏈接連接點(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)。請注意，節(jié)點(diǎn)之間的小間隙可能不足以使鏈接通過。
如果某個(gè)節(jié)點(diǎn)非常靠近鏈接的Link.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)行路由。通常對Group進(jìn)行此操作，以允許在組外部連接的鏈接在組內(nèi)很好地路由。
請注意，使用避免節(jié)點(diǎn)路由的速度明顯比正常的正交路由慢，尤其是對于大型圖表。
端段長度
影響“正交”和“避免節(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)品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線