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,不然識別不了。

下面就整個正常些的做個結尾；

總結

以上是生活随笔為你收集整理的GOJS入门二 -如何节点添加图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。