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

你能夠構建一個節點或其類型的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'
        }
    )
));