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

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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'
        }
    )
));

脚本宝典总结

以上是脚本宝典为你收集整理的GoJS 绘图 (四) :构建节点与GraphObjects全部内容,希望文章能够帮你解决GoJS 绘图 (四) :构建节点与GraphObjects所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。