博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
GoJS 绘图 (四) :构建节点与GraphObjects
阅读量:6678 次
发布时间:2019-06-25

本文共 2016 字,大约阅读时间需要 6 分钟。

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

转载地址:http://qrgxo.baihongyu.com/

你可能感兴趣的文章
前端异常监控 - BadJS
查看>>
nginx安装
查看>>
mysql函数大全
查看>>
tomcat内存溢出设置JAVA_OPTS
查看>>
[CareerCup] 12.5 Test a Pen 测试一支笔
查看>>
Codeforces Round #328 (Div. 2) B. The Monster and the Squirrel 打表数学
查看>>
需要学习的技术
查看>>
TMDS协议
查看>>
Spark应用程序运行的日志存在哪里(转)
查看>>
迭代算法与递归算法的概念及区别
查看>>
我对CSS vertical-align的一些理解与认识(一)
查看>>
离线安装谷歌扩展
查看>>
使用Maven搭建Struts2+Spring3+Hibernate4的整合开发环境
查看>>
Round() 四舍五入 js银行家算法
查看>>
hdu 5594 ZYB's Prime 最大流
查看>>
Android - HelloWorld的Layout内容
查看>>
#Linux学习笔记# Linux文件的所有者、群组和其他人
查看>>
最近反思
查看>>
java四舍五入的取舍
查看>>
Maven支撑下的War应用依赖另外一个WAR应用的解决方案
查看>>