GoJS 繪圖 (十) ：鏈接（完結(jié)）

Rocko 發(fā)布于2019-08-22 10:33 / 2790人閱讀

摘要：非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個(gè)形狀為主要元素，因?yàn)檫@是在節(jié)點(diǎn)之間繪制的線條。鏈接的路線被計(jì)算后將得到一個(gè)路徑的點(diǎn)。可以很容易地建立方向，只需添加一個(gè)形狀并設(shè)置其屬性。目前也就只能先寫這么多吧入門的話問題不大了

非定向鏈接

最簡單的鏈接沒有箭頭指示方向。
該模板只包含一個(gè)形狀為主要元素，因?yàn)檫@是在節(jié)點(diǎn)之間繪制的線條。鏈接的路線被計(jì)算后將得到一個(gè)路徑的點(diǎn)。

diagram.nodeTemplate = g(
    go.Node,
    "Auto",
    new go.Binding("location", "loc", go.Point.Parse),
    g(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#ffffd"
        }
    ),
    g(
        go.TextBlock,
        {
            margin: 5
        },
        new go.Binding("text", "key")
    )
);
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape
    )
);
var nodeDateArray = [
    { key: "apple", loc: "0 0"},
    { key: "object-c", loc: "0 150"}
];

var linkDataArray = [
    { from: "apple", to: "object-c"}
];

定向鏈接

許多節(jié)點(diǎn)都需要用指示的方向性。 GoJS可以很容易地建立方向，只需添加一個(gè)形狀并設(shè)置其Shape.toArrow屬性。當(dāng)然你也可以設(shè)置其它形狀的屬性，如Shape.fill以自定義箭頭的外觀。

var diagram = new go.Diagram("diagram");
var g = go.GraphObject.make;
diagram.nodeTemplate = g(
    go.Node,
    "Auto",
    new go.Binding("location", "loc", go.Point.Parse),
    g(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#ffffd"
        }
    ),
    g(
        go.TextBlock,
        {
            margin: 5
        },
        new go.Binding("text", "key")
    )
);
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape
        g(
            go.Shape,
            {
                toArrow: "OpenTriangle",
                fill: null
            }
        )
    )
);
var nodeDateArray = [
    { key: "apple", loc: "0 0"},
    { key: "object-c", loc: "0 150"}
];

var linkDataArray = [
    { from: "apple", to: "object-c"}
];

目前也就只能先寫這么多吧！！入門的話問題不大了