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'
        }
    )
));