翻譯|使用教程|編輯:吳園園|2019-11-26 09:38:58.623|閱讀 2019 次
概述:可以靈活地精確控制鏈接連接到節點的方式和位置。在前面的示例中,鏈接始終在節點的邊緣結束。但是,您可以在鏈接終止的節點上指定Spot。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
GoJS是一款功能強大,快速且輕量級的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
GoJS現已更新至最新版本2.1發布,添加了動畫功能,修復了一些bug,增強用戶體驗,趕快下載試試吧~
節點上的鏈接連接點
可以靈活地精確控制鏈接連接到節點的方式和位置。在前面的示例中,鏈接始終在節點的邊緣結束。但是,您可以在鏈接終止的節點上指定Spot。
非矩形節點
當節點不具有矩形形狀時,默認情況下,鏈接將在指向節點中心的線與節點邊緣相交的地方結束。
這是一個演示-拖動其中一個節點,觀察鏈接如何始終連接到最近的交叉點或節點的中心。該示例在鏈接的兩端都包括箭頭,以明確表明鏈接路由實際上恰好在節點的邊緣結束。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 90, height: 90,
selectionAdorned: false },
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "FivePointedStar", { fill: "lightgray" }),
$(go.TextBlock,
new go.Binding("text", "key"))
);
diagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, // the "from" end arrowhead
{ fromArrow: "Chevron" }),
$(go.Shape, // the "to" end arrowhead
{ toArrow: "StretchedDiamond", fill: "red" })
);
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);
ToSpot和FromSpot
您可以輕松地要求鏈接在節點范圍內的特定點處結束,而不是在最近的邊緣相交處結束。將GraphObject.toSpot設置為Spot.None以外的Spot值, 以使進入節點的鏈接終止于節點內的該點,其方向適合于該點所在的一側。同樣,將GraphObject.fromSpot設置為從節點出來的鏈接的末端。
以下示例均顯示相同的圖,但使用不同的模板來演示鏈接如何連接到節點。他們都調用此通用函數來定義一些節點和鏈接。
function makeGraph(diagram) {
var $ = go.GraphObject.make;
diagram.layout =
$(go.LayeredDigraphLayout, // this will be discussed in a later section
{ columnSpacing: 5,
setsPortSpots: false });
var nodeDataArray = [
{ key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
{ key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
];
var linkDataArray = [
{ from: "Beta", to: "Alpha" },
{ from: "Gamma", to: "Alpha" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha", to: "Epsilon" },
{ from: "Alpha", to: "Zeta" },
{ from: "Alpha", to: "Eta" },
{ from: "Alpha", to: "Theta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}讓我們指定進入節點的鏈接在左側的中間連接,而離開節點的鏈接在右側的中間連接。這種約定適用于對它們具有一般方向感的圖,例如下圖從左到右。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.Right, // coming out from middle-right
toSpot: go.Spot.Left }, // going into at middle-left
$(go.Shape, "Rectangle", { fill: "lightgray" }),
$(go.TextBlock,
{ margin: 5},
new go.Binding("text", "key"))
);
diagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
makeGraph(diagram);
您還可以指定鏈接不進入單個節點而是沿一側展開。代替Spot.Right使用Spot.RightSide,并且類似地用于左側。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.RightSide, // coming out from right side
toSpot: go.Spot.LeftSide }, // going into at left side
$(go.Shape, "Rectangle", { fill: "lightgray" }),
$(go.TextBlock,
{ margin: 5},
new go.Binding("text", "key"))
);
diagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
makeGraph(diagram);
當然,只有當節點基本上是矩形時,這才看起來不錯。
您可以使用另一種Link.routing:
diagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.RightSide, // coming out from right side
toSpot: go.Spot.LeftSide }, // going into at left side
$(go.Shape, "Rectangle", { fill: "lightgray" }),
$(go.TextBlock,
{ margin: 5},
new go.Binding("text", "key"))
);
diagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, // Orthogonal routing
corner: 10 }, // with rounded corners
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
makeGraph(diagram);
或者,您可以使用另一種Link.curve:
diagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.RightSide, // coming out from right side
toSpot: go.Spot.LeftSide }, // going into at left side
$(go.Shape, "Rectangle", { 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" })
);
makeGraph(diagram);
但是您需要謹慎指定圖形的排列方式。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.TopSide, // coming out from top side -- BAD!
toSpot: go.Spot.RightSide }, // going into at right side -- BAD!
$(go.Shape, "Rectangle", { fill: "lightgray" }),
$(go.TextBlock,
{ margin: 5},
new go.Binding("text", "key"))
);
diagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
makeGraph(diagram);
diagram.add($(go.Part, // this is just a comment
{ location: new go.Point(300, 50) },
$(go.TextBlock, "Bad Spots",
{ font: "16pt bold", stroke: "red" })
));
=====================================================
想要購買GoJS正版授權的朋友可以。
更多精彩內容,歡迎關注下方的微信公眾號,及時獲取產品最新資訊▼▼▼

本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: