GOJS入门二 -如何节点添加图片

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/hdp134793/article/details/100087179

1、当节点什么的都有了的时候我们就可以特别开心的往下走,如何让节点丰富起来(nodes的样式设置)。
下面我们就要针对GraphObjects对象和它的参数配置组成来做一个研究,目前我们先研究下面几个东西:
Shape : 预定义的或者自定义的几何图形;
TextBlock : 各种字体的文本,也就是前端font性质(可编辑的);
Picture : 图片;
Panel : 根据不同面板的类型,它可以包含其他位置或是尺寸不同的对象。(列如表格、 竖形列表和拉伸容器等).
设置样式原理:通过实现数据绑定,监听Model数据,自动改变Nodes上的GraphObjects外观和行为。默认的Nodes模板非常简单:仅仅是包含一个TextBlock的Nodes。TextBlock的text字段和Model中Nodes数据的key字段绑定在一起。

说这些理论的理解起来累死了,二话不说直接上图撸码。
先上图:
在这里插入图片描述
针对中间的设置为方块且背景色为好看色的时候,页面呈现出来的效果如上所示:相关具体的代码如下,主要应用的是shape这个属性。代码如下所示:
在这里插入图片描述
如上代码所示我们发现这个new go.Binding(“text”, “key”)
在这里我解释一下,这个主要是用于实现数据的一个绑定,比如之前我们定义了一个这个东西, myModel.nodeDataArray,里面就有一个key值就是和这个对应,优先级大于内部配置的text.自动忽略里面的文字

其他的也是类似设置,好比上面说到的对文字样式设置的属性TextBlock 。
在这里插入图片描述
下面再讲一个我们实际应用中用到最普遍的就是图片这个东西。主要Picture 属性的设置,如下所示我们做个代码修改,将图片显示在节点里面。
在这里插入图片描述
将图片这个元素也给加进去了,代码如下所示:
在这里插入图片描述
在这里插入图片描述
其实这个里面的 new go.Binding(“source”,“img”)), 可以直接写new go.Binding(“source”)) 这样的话,对应node的img就只能是source,不然识别不了。

下面就整个正常些的做个结尾;
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/hdp134793/article/details/100087179
今日推荐