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

jokester 发布于2019-08-19 18:25 / 1008人阅读

摘要：你可以构建一个节点或其类型的代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的示意图。一个非常简单的节点由一个与构成。虽然以这种方式构建的节点将工作变得更加复杂的代码将变得更加难以阅读和维护。

你可以构建一个节点或其类型的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://www.ucloud.cn/yun/79579.html

GoJS 绘图 (八) ：模型和模版

摘要：下面是这样做的一种方式使用模型和模板事实上，图已经为节点和链接非常简单的默认模板。该特定节点的数据已投入对象的数组。因此，我们需要替换节点模版。数据绑定数据绑定是一种声明声明一个对象的属性值应该用于设置另一个对象的属性值。使用模版构视图让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式： var node1 = g( go.Node, Auto, ...

Hanks10100 2019-08-21 10:52 评论0 收藏0
GoJS 绘图 (十) ：链接（完结）

摘要：非定向链接最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。可以很容易地建立方向，只需添加一个形状并设置其属性。目前也就只能先写这么多吧入门的话问题不大了非定向链接最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。 diag...

Rocko 2019-08-22 10:33 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 评论0 收藏0
GoJS 绘图 (九) ：数据绑定

摘要：绑定字符串和数字特性绑定数据的属性。转换功能你可以通过转换函数的第三个参数绑定构造函数。允许位置字符串的形式来指定，而不是作为一个表达式的点。转换函数可以是命名或匿名函数。他们把数据属性值作为参数，并返回适用于正在设置该属性的值。绑定字符串和数字特性绑定GraphObject数据的属性。在这个例子中，我们不仅绑定TextBlock.text和Shape.fill中的节点到节点数据的...

fobnn 2019-08-19 18:31 评论0 收藏0