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

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,不然识别不了。

下面就整个正常些的做个结尾；