什么是gojs？

gojs 圖形庫功能非常強大，大家先看它的 Sample 就能看到，我們平常能想到的各種示意圖、結構圖、組織圖、流程圖、狀態圖、思維導圖、樹狀圖等等幾十種，都有相應的原始碼可以參考，

1. 基礎

我們先從基礎開始，參考官方 learn，以下基本按照官方檔案的流程一步步，再加上自己的理解，示例檔案參考 github 的 test1.html

<script src="go.js"></script> //... var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", ...); //... var myModel = $(go.Model); myModel.nodeDataArray = [{...}]; myDiagram.model = myModel;

里面有幾個基礎概念：

• 參考 go.js 肯定是必須的，gojs 是付費的，左上角有水印，網上有破解的方法，
• gojs有很多種基本 View 物件，其中 go.Diagram，go.Node, go.Link 是最基礎的，Diagram 必須和 H5 里的 div 對應的 id 關聯，類似初始化一個畫布, Node 和 Link 是表示 Diagram 里的點/塊和線物件，
• go.model 是圖上的可視化物件集合對應的 model 物件，通常是一個 json 陣列，
• go.GraphObject.make 是 gojs 最基礎的建構式，包括 view 和 model 都是通過 make 函式創建出來的，
• myDiagram.model = myModel ，這是標準的 view 和 model 系結，

代碼很少，但是運行后，實作了顯示一個三個節點的圖形，而且默認實作了很多互動功能，比如 拖拽全部、拖拽單個、拷貝、粘貼、洗掉、多選、全選等，

2. 設定節點的樣式

Node 物件又分四種具體型別：

• Shape，用于顯示具有顏色的預定義或自定義幾何體
• TextBlock，以各種字體顯示（可能可編輯）文本
• Picture，顯示影像，包括 SVG 檔案
• Panel，容器，用于保存其他物件的集合，這些物件可以根據面板的型別以不同的方式定位和調整大小（如表、垂直和拉伸容器）

參考 test2.html , 給 Diagram設定 nodeTemplate ,告訴 H5 的 canvas 如何繪制節點，繪制用到的資料都從 model 來，其中 test1.html 沒有設定樣式是因為預設的節點樣式就是 TextBlock，顯示的文本就系結了 model 的 key 關鍵字，

myDiagram.nodeTemplate = $(go.Node, $(go.TextBlock, // TextBlock.text is bound to Node.data.key new go.Binding("text", "key")) );

運行 test2.html 效果和 test1.html是一樣的，因為那就是默認樣式，以上就是一個雖然簡單但是完整的 gojs 代碼結構：

• 初始化 Diagram, 系結 div, 初始化 Diagram 全域的一些屬性
• 初始化 Model，定義資料，并和 Diagram 系結
• 初始化 Diagram 內部的物件樣式，所有物件用一樣的模板，再根據 model 里的不同資料顯示不同的效果，

3. 設定節點的樣式(組合）

我們再來看 test3.html ,這里的例子是把節點樣式弄復雜一點，是幾種型別組合起來的（Panel)：

myDiagram.nodeTemplate = $(go.Node, "Horizontal",// second argument of a Node (or any Panel) can be a Panel type // the entire node will have a light-blue background { background: "#44CCFF" }, $(go.Picture, // Pictures should normally have an explicit width and height. // This picture has a red background, only visible when there is no source set // or when the image is partially transparent. { margin: 10, width: 50, height: 50, background: "red" }, // Picture.source is data bound to the "source" attribute of the model data new go.Binding("source")), $(go.TextBlock, "Default Text", // the initial value for TextBlock.text // some room around the text, a larger font, and a white stroke: { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, // TextBlock.text is data bound to the "name" property of the model data new go.Binding("text", "name")) );

我們可以看到第二個引數是一個字串 "Horizontal" 表示是節點的樣式是一個容器，容器里面的物件是水平排列，其中 make 函式的第4、第5個引數就是容器內部的物件，相當于左邊是圖片，右邊是文字，然后每個物件又是通過 make 函式構造出來的，就這樣再復雜的組合都是這樣一層層嵌套起來，

image.png

我們來看看 make 函式的基本規則：

go.GraphObject.make( //第一個引數是基本物件型別（可以理解為 java 的 class )，比如 go.Diagram,go.Node, go.Link, go.Model,go.Shape,go.TextBlock等等 go.xxx, //必須要有 //第二個引數是一個字串，通常是型別列舉字串，預設值等，表達的意義和第一個引數相關，比如 div 的 id、Panel的型別、文本的預設值 "string", //不是必填 //第三個引數是一個json物件，表示第一個引數對應的物件的通用的屬性集，比如字體大小、背景色之類的 {"key1":"value1","key2":"value2"}，//不是必填 //第四個--第n個引數是物件的具體實體（可以理解為 java 的 instance),也就是嵌套一個go.GraphObject.make(...)回傳的物件 //這里也可以是個性化的物件屬性，和第三個引數不一樣，這里的屬性和 model 的值系結，不是通用的屬性 go.GraphObject.make(...) 或 new go.Binding("屬性名稱", "model 里的key名稱")) )

4. 設定節點之間的鏈接

如果要加上 Link，則 model 的型別得變了，gojs 提供2種，GraphLinksModel 和 TreeModel 可以理解為 Model 的子類，這2個 Model 的主要差別就是一個是用 from 和 to 來描述鏈接的起始點和結束點，而 TreeModel 是用 parent 來描述樹狀結構的父節點，

var model = $(go.GraphLinksModel); model.nodeDataArray = [ { key: "A" }, { key: "B" }, { key: "C" } ]; model.linkDataArray = [ { from: "A", to: "B" }, { from: "B", to: "C" } ]; myDiagram.model = model;

var model = $(go.TreeModel); model.nodeDataArray = [ { key: "A" }, { key: "B", parent: "A" }, { key: "C", parent: "B" } ]; myDiagram.model = model;

我們看示例 test4.html ，只是把 Model 換成 TreeModel， 另外給對應的資料增加一個 key 欄位和 parent 欄位就可以了

var model = $(go.TreeModel); model.nodeDataArray = [ // note that each node data object holds whatever properties it needs; // for this app we add the "name" and "source" properties { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Copricat", source: "cat2.png" }, { key: "3", parent: "1", name: "Demeter", source: "cat3.png" }, { key: "4", parent: "3", } ];

image.png

可以看到節點間連線有了，但是看上去不像一個樹狀結構，

5. 設定布局 Layout

就是需要設定節點與節點, 節點和整個圖形之間的相對位置，延續上面的示例，我們增加一個布局屬性,gojs 帶了很多種 layout，我們這里用 go.TreeLayout , 參考示例 test5.html

var myDiagram = $(go.Diagram, "myDiagramDiv", { // enable Ctrl-Z to undo and Ctrl-Y to redo "undoManager.isEnabled": true, layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees { angle: 90, layerSpacing: 35 }) });

image.png

連線也是可以設定樣式的目前連線都是默認預設的樣式，

6. 設定Link的樣式

類似節點的樣式，鏈接也可以設定通用屬性（Template） 或 系結資料設定不同屬性值，參考示例 Test6.html

myDiagram.linkTemplate = $(go.Link, { routing: go.Link.Orthogonal, corner: 5 }, $(go.Shape, // the link's path shape { strokeWidth: 3, stroke: "#555" }));

設定連線是一個圓角無箭頭有顏色和粗細的線：

image.png

以上是第一部分，基本涵蓋了 gojs 的基本概念和用法，剩下的就是大量子類、屬性得具體用法，包括一下事件互動，我們后面可以基于官方 Sample 來學習，

原文鏈接： https://www.jianshu.com/p/a0b0792d32ea