go js 學習筆記(一)

---恢復內容開始---

 

由於工作需要，需要gojs

簡單來說

GoJS的繪圖基於Html5的Canvas元素。一個Gojs文件基本構成包括畫布，數據模型，模型內節點等。

一般來說通過id方式獲取盒子，然后通過gojs的

go.GraphObject.make;來創建畫布。

 var $ = go.GraphObject.make;

 通常會使用這樣的方式來減少代碼輸入量。

go.GraphObject.make接收三個參數，第一個參數是go.js的類，第二個是這個類方法調用所需要的參數，第三個是詳細的option。

var myDiagram =
$(go.Diagram, "stDiagram",
{   ... })

 以初始化畫布為例，

gojs繪制的圖表（Diagram）具有兩個最基本的元素，就是點和線（Node和Link），並且他們可以自由組合組成一個組（Group）。

所有的元素都處在圖層（Layer）上，並且可以對它們進行布局（Layout）。

每個Diagram都是通過數據模型（Model）來填充和確定Node的信息和Link的所屬關系的。

並且我們只需要創建好Node和Link的模板以及數據模型，其他的是事情都交給gojs去處理。

它會通過Model.nodeDataArray方法和GraphLinksModel.linkDataArray方法自動加載模型並構建元素。

每一個Node和Link都是通過模板來描述他們的文本、形狀、顏色等信息以及交互行為。

每個模板其實就是一個面板（Panel）（你可以將各種元素自由組合在它里面，也可以在它里面添加各種交互行為），比如說將TextBlock、Shape、Picture等元素添加到這個Panel中，鼠標進入離開的交互行為也可以添加到Panel中，那么這個Panel就是一個模板。

每個Node的位置可以使用Diagram.layout或Group.layout進行初始化設置，也可以基於交互行為進行拖拽。

gojs里的工具類可以為Diagram添加鼠標、鍵盤事件。

一般情況下Diagram都默認設置了幾種交互行為，比如說拖拽、連線。我們也可以通過ToolManager對象來管理工具類，或者說來管理交互行為，比如說可以停止某些交互，或開啟某些交互等。

每個Diagram同時也包含CommandHandler對象，它的作用是添加一些鍵盤命令，比如點Delete鍵刪除元素，Ctrl+C復制、Ctrl+V粘貼、Ctrl+Z撤銷等。但是CommandHandler也是被ToolManager管理的。

Diagram也提供通過鼠標中鍵滾動視圖、放大縮小視圖。

gojs還提供了圖表的預覽視圖（Overview），用於了解大規模圖表的概況，同時還提供了組件管理面板（Palette），用於管理創建的組件，並且支持將組件拖拽到Diagram中。

在Diagram中，你可以選中Node或者Link，你會發現他們有少許的變化，比如在Node周圍會增加選中框，選中Link會變色等。這些都是由Adornment對象控制的，你還可以用它來增加提示框、右鍵菜單等。