GoJS 繪圖 (四) ：構建節點與GraphObjects

jokester 發布于2019-08-19 18:25 / 1115人閱讀

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

你可以構建一個節點或其類型的JavaScript代碼。
以下將討論基本類型，你可以用它來建立一個節點對象。這些頁面通過明確創建和添加節點和鏈路建立的示意圖。以下頁面將展示如何使用模型，而不是使用這些代碼來構建圖表。

傳統方式

一個GraphObject是可以被構造和任何其他對象以相同的方式初始化的JavaScript對象。一個節點是一個GraphObject包含TextBlocks，shapes，Pictures和Panels。

一個非常簡單的節點由一個shape與TextBlock構成。使用原始方式：

var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "#394";
node.add(shape);
var textBlock = new go.TextBlock();
textBlock.text = "Hello!";
textBlock.margin = 5;
textBlock.editable = true;
node.add(textBlock);
diagram.add(node);

這是一個可以移動的圖表，而不是一個屏幕顯示圖像，因此您可以單擊該節點來選擇它，然后拖動。
雖然以這種方式構建的節點將工作變得更加復雜的代碼將變得更加難以閱讀和維護。幸運的是GoJS有一個更好的方式GraphObject。
此外，后面的章節將討論如何節點和鏈接會使用自動模型，模板創建，且數據綁定。直到那個時候，這些頁面將明確創建節點并將它們添加到圖表。

GraphObject.make

GoJS定義靜態函數GraphObject.make，這個靜態函數生成對象賦予其類，并提供初始屬性或其他參數GraphObject S中的成為面板元素。
GraphObject.make是一個函數的第一個參數必須是一個類類型。通常是
一個字符串，它設定了TextBlock.text，Shape.figure，Picture.source或Panel.type
我們可以重寫上面的代碼使用go.GraphObject.make產生完全相同的結果

var G = go.GraphObject.make;
diagram.add(G(
    go.Node,
    go.Panel.Auto,
    G(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#394"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "Hello!",
            margin: 5,
            editable: true
        }
    )
));

這可以通過使用字符串參數來簡化一下：

diagram.add(G(
    go.Node,
    "Auto",
    G(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#394"
        }
    ),
    G(
        go.TextBlock,
        "Hello!",
        {
            margin: 5,
            editable: true
        }
    )
));

所有使用GraphObject.make初始化仍然是JavaScript代碼，所以我們可以調用函數和共享對象，如樣式：

var style = {
    width: 55,
    height: 30,
    margin: 5,
    fill: "#555"
}
diagram.add(G(
    go.Node,
    "Auto",
    G(
        go.Shape,
        "RoundedRectangle",
        style
    ),
    G(
        go.TextBlock,
        {
            text: "xy1"
        }
    )
));

diagram.add(G(
    go.Node,
    "Auto",
    G(
        go.Shape,
        "Rectangle",
        style
    ),
    G(
        go.TextBlock,
        {
            text: "xy2"
        }
    )
));

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79579.html

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

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

Hanks10100 2019-08-21 10:52 評論0 收藏0
GoJS 繪圖 (十) ：鏈接（完結）

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

Rocko 2019-08-22 10:33 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 評論0 收藏0
GoJS 繪圖 (九) ：數據綁定

摘要：綁定字符串和數字特性綁定數據的屬性。轉換功能你可以通過轉換函數的第三個參數綁定構造函數。允許位置字符串的形式來指定，而不是作為一個表達式的點。轉換函數可以是命名或匿名函數。他們把數據屬性值作為參數，并返回適用于正在設置該屬性的值。綁定字符串和數字特性綁定GraphObject數據的屬性。在這個例子中，我們不僅綁定TextBlock.text和Shape.fill中的節點到節點數據的...

fobnn 2019-08-19 18:31 評論0 收藏0