流程圖控件GoJS教程：鏈接（下）
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS現已更新至最新版本2.0.17發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~
曲線，彎曲度，轉角
一旦Link.routing確定了鏈接采用的路線（即點的順序），其他屬性將控制有關鏈接形狀如何獲取其路徑幾何的詳細信息。第一個這樣的屬性是Link.curve，它控制鏈接形狀是基本上是直線段還是大曲線。
為默認值Link.curve是Link,None，產生鏈接的形狀有直線段正如你看到的上面。
Link，Bezier的值會為鏈接形狀生成自然彎曲的路徑。
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,
{ curve: go.Link.Bezier }, // Bezier curve
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
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);
您可以通過設置Link.curviness屬性來控制其彎曲程度。默認情況下會產生一條輕微的曲線。
如果有多個鏈接，除非您明確分配Link.curviness，否則它將自動為每個鏈接的曲線計算合理的值。
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,
{ curve: go.Link.Bezier },
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0" },
{ key: "Beta", loc: "100 50" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // multiple links between the same nodes
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
當Link.routing為“正交”或“避免節點” 時，另一種彎曲來自圓角。
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,
corner: 10 }, // rounded corners
$(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);
另一種彎曲來自將Link.curve設置為Link，JumpOver。這會在與另一個也具有JumpOver曲線的正交鏈接交叉的正交鏈接的路徑中引起很少的“跳躍”。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
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, // may be either Orthogonal or AvoidsNodes
curve: go.Link.JumpOver },
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 50" },
{ key: "Beta", loc: "100 50" },
{ key: "Alpha2", loc: "50 0" },
{ key: "Beta2", loc: "50 100" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // these two links will cross
{ from: "Alpha2", to: "Beta2" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
請注意，鏈接跳躍的使用明顯比普通鏈接慢，因為必須計算所有交叉點，并且鏈接形狀的幾何形狀將更加復雜。
另一種彎曲（或實際上缺乏彎曲）來自將Link.curve設置為Link，JumpGap。這會在與另一個也具有JumpGap曲線的正交鏈接交叉的正交鏈接的路徑中引起很小的“間隙”。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
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, // may be either Orthogonal or AvoidsNodes
curve: go.Link.JumpGap },
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 50" },
{ key: "Beta", loc: "100 50" },
{ key: "Alpha2", loc: "50 0" },
{ key: "Beta2", loc: "50 100" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // these two links will cross
{ from: "Alpha2", to: "Beta2" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
輕松點擊鏈接
用戶可能會注意到的一個問題是，尤其是在使用手指以及鼠標的情況下，單擊具有較薄Link.path的鏈接可能很困難?？梢詫hape.strokeWidth設置為較大的值，例如8，但是您可能不希望這種外觀。
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, { strokeWidth: 8 }), // thick path
$(go.Shape, { toArrow: "Standard" })
);
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);
解決方案是添加粗路徑Shape，但不繪制任何東西。設置即可輕松完成{ stroke: "transparent", strokeWidth: 8 }。但是，如果要保留原始路徑Shape，則需要通過將GraphObject.isPanelMain設置為true ，將兩個 Shape 都聲明為Link的“主要”元素。“鏈接”面板知道所有此類形狀都應為鏈接路徑獲得相同的計算幾何形狀。
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, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }), // thick undrawn path
$(go.Shape, { isPanelMain: true }), // default stroke === "black", strokeWidth === 1
$(go.Shape, { toArrow: "Standard" })
);
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);
在此示例中，您將發現選擇鏈接比沒有第二個透明鏈接路徑形狀更容易。
透明形狀也可以用于突出顯示目的。例如，要實現在鼠標經過鏈接時突出顯示鏈接的效果，請添加GraphObject.mouseEnter和GraphObject.mouseLeave事件處理程序：
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, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }), // thick undrawn path
$(go.Shape, { isPanelMain: true }), // default stroke === "black", strokeWidth === 1
$(go.Shape, { toArrow: "Standard" }),
{
// a mouse-over highlights the link by changing the first main path shape's stroke:
mouseEnter: function(e, link) { link.elt(0).stroke = "rgba(0,90,156,0.3)"; },
mouseLeave: function(e, link) { link.elt(0).stroke = "transparent"; }
}
);
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);
將鼠標移到鏈接上可以查看效果。這樣的反饋還有助于用戶單擊或上下文單擊鏈接。
短長度
請注意，在上面的示例中，黑色路徑形狀較粗，箭頭似乎由于鏈接路徑的厚度而消失了?？梢酝ㄟ^將箭頭的GraphObject.scale增加到2來避免該問題。
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, { strokeWidth: 8 }), // thick path
$(go.Shape, { toArrow: "Standard", scale: 2 }) // bigger arrowhead
);
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);
現在箭頭清晰可見。但是，這又表明箭頭在鏈接路徑的最末端仍然被遮蓋，因為它太寬而無法顯示箭頭的點。通過將Link.toShortLength設置為諸如8的值（取決于所用箭頭的類型）可以避免該問題。路徑幾何形狀將縮短該距離，以使鏈接路徑不會干擾箭頭。
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,
{ toShortLength: 8 }, // shortens path to avoid interfering with arrowhead
$(go.Shape, { strokeWidth: 8 }), // thick path
$(go.Shape, { toArrow: "Standard", scale: 2 }) // bigger arrowhead
);
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);
還有一個Link.fromShortLength屬性，用于控制繪制鏈接路徑的“ from”端的距離。如果存在一個結束段，則可以縮短的距離限于相應的 Link.toEndSegmentLength或Link.fromEndSegmentLength。還要注意，短長度可能為負，這會導致鏈接路徑被拉長-進入鏈接所連接的端口。
斷開鏈接
通常的期望是，除非將兩個節點連接在一起，否則就無法建立鏈接關系。但是，GoJS確實支持創建和操作具有null值的Link.fromNode和Link.toNode屬性之一或全部的鏈接。Draggable Link示例演示了這一點。
鏈路的兩端必須連接到節點，以便標準鏈路路由能夠運行。如果鏈接不知道從哪里開始或在哪里結束，則不能計算該鏈接的路線或位置。但是，可以通過將Link.points設置或綁定到兩個或多個Points的列表來提供路線。這將自動為鏈接指定位置，以便可以在圖中看到它。
鏈接工具LinkingTool和RelinkingTool通常不允許創建或重新連接以“ nothing”連接的鏈接。但是，您可以將LinkingBaseTool.isUnconnectedLinkValid設置為true以允許用戶這樣做，如Draggable Link示例所示。
除非鏈接是包含連接節點的集合的一部分，否則通常無法拖動鏈接。但是，您可以將DraggingTool.dragsLink設置為true，以允許用戶拖動單獨的Link。此模式允許用戶通過將鏈接拖離其所連接的節點/端口來斷開鏈接。它還允許用戶通過斷開鏈接來重新連接鏈接的一端或兩端，以使該端位于有效端口上。Draggable Link示例也證明了這一點。
=====================================================
想要購買GoJS正版授權的朋友可以。
更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線