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對象控制的，你還能夠用它來增長提示框、右鍵菜單等。