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'
        }
    )
));
    原文作者:谢鸢
    原文地址: https://segmentfault.com/a/1190000005353341
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞