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

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

摘要：非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節(jié)點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點?？梢院苋菀椎亟⒎较颍恍杼砑右粋€形狀并設置其屬性。目前也就只能先寫這么多吧入門的話問題不大了

非定向鏈接

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

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é)點都需要用指示的方向性。 GoJS可以很容易地建立方向，只需添加一個形狀并設置其Shape.toArrow屬性。當然你也可以設置其它形狀的屬性，如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"}
];

目前也就只能先寫這么多吧?。∪腴T的話問題不大了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/90819.html

GoJS 繪圖 (八) ：模型和模版

摘要：下面是這樣做的一種方式使用模型和模板事實上，圖已經為節(jié)點和鏈接非常簡單的默認模板。該特定節(jié)點的數(shù)據(jù)已投入對象的數(shù)組。因此，我們需要替換節(jié)點模版。數(shù)據(jù)綁定數(shù)據(jù)綁定是一種聲明聲明一個對象的屬性值應該用于設置另一個對象的屬性值。使用模版構視圖讓我們嘗試建立兩個節(jié)點，將它們與一個鏈接連接。下面是這樣做的一種方式： var node1 = g( go.Node, Auto, ...

Hanks10100 2019-08-21 10:52 評論0 收藏0
GoJS 繪圖 (四) ：構建節(jié)點與GraphObjects

摘要：你可以構建一個節(jié)點或其類型的代碼。以下將討論基本類型，你可以用它來建立一個節(jié)點對象。這些頁面通過明確創(chuàng)建和添加節(jié)點和鏈路建立的示意圖。一個非常簡單的節(jié)點由一個與構成。雖然以這種方式構建的節(jié)點將工作變得更加復雜的代碼將變得更加難以閱讀和維護。你可以構建一個節(jié)點或其類型的JavaScript代碼。以下將討論基本類型，你可以用它來建立一個節(jié)點對象。這些頁面通過明確創(chuàng)建和添加節(jié)點和鏈路建立的...

jokester 2019-08-19 18:25 評論0 收藏0
GoJS 繪圖 (一) ：入門

摘要：是一個庫，讓你輕松創(chuàng)建現(xiàn)代瀏覽器的交互圖。支持圖形化的模板和圖形對象屬性數(shù)據(jù)模型的數(shù)據(jù)綁定。許多預定義的工具和命令執(zhí)行，大部分的圖表所需要的標準的行為。外觀和行為的定制是大多設置屬性的問題。 GoJS是一個JavaScript庫，讓你輕松創(chuàng)建現(xiàn)代Web瀏覽器的交互圖。 GoJS支持圖形化的模板和圖形對象屬性數(shù)據(jù)模型的數(shù)據(jù)綁定。你只需要保存和恢復模型，包括持有任何性質的應用需求，簡單的J...

X_AirDu 2019-08-19 18:23 評論0 收藏0
GoJS 繪圖 (六) ：橫向面板（panel）

摘要：橫向面板屬性和縱向面板基本相同只是排列順序不同默認對齊和拉伸垂直和水平兩個面板的支持的和屬性。這是一種便捷的方式使您不必設置每個元件的或橫向面板屬性和縱向面板基本相同只是排列順序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

Hancock_Xu 2019-08-19 18:26 評論0 收藏0
GoJS 繪圖 (三) ：shapes

摘要：繪制一個幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫和填充。形狀不像的和，形狀不能包含任何其他對象。還需要設置或和參數(shù)，作為確定形狀尺寸。在這些簡單的演示，該代碼創(chuàng)建一個圖形，并將其添加到畫布中。屬性指定輪廓的粗細。繪制一個幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫和填充。形狀不像的TextBlocks和Pictures，形狀不能包含任何其他對象。基礎圖形您可以...

siberiawolf 2019-08-19 18:24 評論0 收藏0