GoJS 绘图 (四) ：构建节点与GraphObjects

2016-07-04 12:57:00

你可以构建一个节点或其类型的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'
}
)
));