gojs 圖形庫功能非常強(qiáng)大，大家先看它的 Sample 就能看到，我們平常能想到的各種示意圖、結(jié)構(gòu)圖、組織圖、流程圖、狀態(tài)圖、思維導(dǎo)圖、樹狀圖等等幾十種，都有相應(yīng)的源碼可以參考。

1. 基礎(chǔ)

我們先從基礎(chǔ)開始，參考官方 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;

里面有幾個(gè)基礎(chǔ)概念：

• 引用 go.js 肯定是必須的，gojs 是付費(fèi)的，左上角有水印，網(wǎng)上有破解的方法。
• gojs有很多種基本 View 對(duì)象，其中 go.Diagram，go.Node, go.Link 是最基礎(chǔ)的，Diagram 必須和 H5 里的 div 對(duì)應(yīng)的 id 關(guān)聯(lián)，類似初始化一個(gè)畫布, Node 和 Link 是表示 Diagram 里的點(diǎn)/塊和線對(duì)象。
• go.model 是圖上的可視化對(duì)象集合對(duì)應(yīng)的 model 對(duì)象，通常是一個(gè) json 數(shù)組。
• go.GraphObject.make 是 gojs 最基礎(chǔ)的構(gòu)造函數(shù)，包括 view 和 model 都是通過 make 函數(shù)創(chuàng)建出來的。
• myDiagram.model = myModel ，這是標(biāo)準(zhǔn)的 view 和 model 綁定。

代碼很少，但是運(yùn)行后，實(shí)現(xiàn)了顯示一個(gè)三個(gè)節(jié)點(diǎn)的圖形，而且默認(rèn)實(shí)現(xiàn)了很多交互功能，比如 拖拽全部、拖拽單個(gè)、拷貝、粘貼、刪除、多選、全選等。

2. 設(shè)置節(jié)點(diǎn)的樣式

Node 對(duì)象又分四種具體類型：

• Shape，用于顯示具有顏色的預(yù)定義或自定義幾何體
• TextBlock，以各種字體顯示（可能可編輯）文本
• Picture，顯示圖像，包括 SVG 文件
• Panel，容器，用于保存其他對(duì)象的集合，這些對(duì)象可以根據(jù)面板的類型以不同的方式定位和調(diào)整大?。ㄈ绫怼⒋怪焙屠烊萜鳎?/li>

參考 test2.html , 給 Diagram設(shè)置 nodeTemplate ,告訴 H5 的 canvas 如何繪制節(jié)點(diǎn)，繪制用到的數(shù)據(jù)都從 model 來，其中 test1.html 沒有設(shè)置樣式是因?yàn)槿笔〉墓?jié)點(diǎn)樣式就是 TextBlock，顯示的文本就綁定了 model 的 key 關(guān)鍵字。

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

運(yùn)行 test2.html 效果和 test1.html是一樣的，因?yàn)槟蔷褪悄J(rèn)樣式。以上就是一個(gè)雖然簡單但是完整的 gojs 代碼結(jié)構(gòu)：

• 初始化 Diagram, 綁定 div, 初始化 Diagram 全局的一些屬性
• 初始化 Model，定義數(shù)據(jù)，并和 Diagram 綁定
• 初始化 Diagram 內(nèi)部的對(duì)象樣式，所有對(duì)象用一樣的模板，再根據(jù) model 里的不同數(shù)據(jù)顯示不同的效果。

3. 設(shè)置節(jié)點(diǎn)的樣式(組合）

我們?cè)賮砜?test3.html ,這里的例子是把節(jié)點(diǎn)樣式弄復(fù)雜一點(diǎn)，是幾種類型組合起來的（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"))
    );

我們可以看到第二個(gè)參數(shù)是一個(gè)字符串 "Horizontal" 表示是節(jié)點(diǎn)的樣式是一個(gè)容器，容器里面的對(duì)象是水平排列，其中 make 函數(shù)的第4、第5個(gè)參數(shù)就是容器內(nèi)部的對(duì)象，相當(dāng)于左邊是圖片，右邊是文字，然后每個(gè)對(duì)象又是通過 make 函數(shù)構(gòu)造出來的，就這樣再復(fù)雜的組合都是這樣一層層嵌套起來。

image.png

我們來看看 make 函數(shù)的基本規(guī)則：

go.GraphObject.make(
//第一個(gè)參數(shù)是基本對(duì)象類型（可以理解為 java 的 class )，比如 go.Diagram,go.Node, go.Link, go.Model,go.Shape,go.TextBlock等等 
go.xxx, //必須要有
//第二個(gè)參數(shù)是一個(gè)字符串，通常是類型枚舉字符串，缺省值等，表達(dá)的意義和第一個(gè)參數(shù)相關(guān)，比如 div 的 id、Panel的類型、文本的缺省值
"string", //不是必填
//第三個(gè)參數(shù)是一個(gè)json對(duì)象，表示第一個(gè)參數(shù)對(duì)應(yīng)的對(duì)象的通用的屬性集，比如字體大小、背景色之類的
{"key1":"value1","key2":"value2"}，//不是必填
//第四個(gè)--第n個(gè)參數(shù)是對(duì)象的具體實(shí)例（可以理解為 java 的 instance),也就是嵌套一個(gè)go.GraphObject.make(...)返回的對(duì)象
//這里也可以是個(gè)性化的對(duì)象屬性，和第三個(gè)參數(shù)不一樣，這里的屬性和 model 的值綁定，不是通用的屬性
go.GraphObject.make(...) 或 new go.Binding("屬性名稱", "model 里的key名稱"))
)

4. 設(shè)置節(jié)點(diǎn)之間的鏈接

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

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， 另外給對(duì)應(yīng)的數(shù)據(jù)增加一個(gè) 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

可以看到節(jié)點(diǎn)間連線有了，但是看上去不像一個(gè)樹狀結(jié)構(gòu)。

5. 設(shè)置布局 Layout

就是需要設(shè)置節(jié)點(diǎn)與節(jié)點(diǎn), 節(jié)點(diǎn)和整個(gè)圖形之間的相對(duì)位置，延續(xù)上面的示例，我們?cè)黾右粋€(gè)布局屬性,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

連線也是可以設(shè)置樣式的目前連線都是默認(rèn)缺省的樣式。

6. 設(shè)置Link的樣式

類似節(jié)點(diǎn)的樣式，鏈接也可以設(shè)置通用屬性（Template） 或 綁定數(shù)據(jù)設(shè)置不同屬性值。
參考示例 Test6.html

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

設(shè)置連線是一個(gè)圓角無箭頭有顏色和粗細(xì)的線：

image.png

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