GoJS能幹什麼,廢話很少說,進傳送門看看。 傳送門
<html> <head> <!-- 引用GoJS --> <script src="go-debug.js"></script> </head> <body> <!-- 每個圖型都要包含在HTML中有明確大小的<div>裏 --> <div id="myDiagramDiv" style="width:800px; height:500px; background-color: #DAE4E4;"></div> <script> // 若是用了jQuery等其餘庫或框架,這裏$會有衝突,在這裏換成 $$/MAKE/GO等 var $ = go.GraphObject.make; // JS中經過div的id來製做圖標 var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo }); </script> </body> </html>
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // CTRL-Z撤銷操做,CTRL-Y恢復操做 }); // 新建模型 var myModel = $(go.Model); // 在模型數據中,每一個節點由JavaScript對象表示 myModel.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" } ]; myDiagram.model = myModel;
生成三個可拖拽的對象html
- 單擊並拖動上圖中的背景以平移視圖
- 單擊一個節點來選擇它,或者按下並拖動一個節點來移動它
- 使用CTRL-C和CTRL-V 或 按住CTRL而後控件拖放來複制
- 用Delete鍵刪除選中控件, 戳我查看更多快捷鍵
- 若是撤消管理器已啓用,CTRL-Z撤銷操做,CTRL-Y恢復操做
咱們能夠修改節點的樣式種類:node
- 形狀: Shape
- 文本塊: TextBlock
- 圖片: Picture
- 容器面板: Panel
// 使用介紹 // 第一個參數 go.Node,由面板和自己的其餘節點自己的其餘圖形對象組成 // 第二個參數 'Auto', 對應面板的類型, myDiagram.nodeTemplate = $(go.Node, 'Auto', // 而後將元素定義在這個面班中:Shap,TextBlock等 $(go.TextBlock, // TextBlock的內容和節點數據對象中的key綁定 new go.Binding("text", "key")) ); var model = $(go.Model); model.nodeDataArray = [ { key: "text", source: "cat1.png" } ]; myDiagram.model = model;
代碼示例:框架
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true }); myDiagram.nodeTemplate = $(go.Node, "Horizontal", // 整個控件是藍色背景 { background: "#44CCFF" }, $(go.Picture, // 一般狀況下,圖片須要有明確的寬度。當沒有設置圖片路徑 或者 圖片是透明的時候會顯示紅色背景, { margin: 10, width: 50, height: 50, background: "red" }, new go.Binding("source")), $(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, // 初始化文本樣式 new go.Binding("text", "name")) // 綁定數據的key ); var model = $(go.Model); model.nodeDataArray = [ { name: "Don Meow", source: "1.png" }, { name: "Copricat", source: "2.png" }, { name: "Demeter", source: "3.png" }, { /* Empty node data */ } ]; myDiagram.model = model;
運行結果:spa
若是咱們想要實現圖像模型之間的聯繫,基礎模型是知足不了咱們的需求的,咱們看看其餘的模型吧。 (GraphLinksModel and TreeModel)
1. GraphLinksModel.net
在GraphLinksModel中,咱們能夠在model.linkDataArray中設置控件與控件之間的關係
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;
2. TreeModel
TreeModel有點不一樣debug
// 使用方法 var model = $(go.TreeModel); model.nodeDataArray = [ { key: "A" }, { key: "B", parent: "A" }, { key: "C", parent: "B" } ]; myDiagram.model = model;
// TreeModel使用 var model = $(go.TreeModel); model.nodeDataArray = [ { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Demeter", source: "cat2.png" }, { key: "3", parent: "1", name: "Copricat", source: "cat3.png" }, { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "cat5.png" }, { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" } ]; myDiagram.model = model;
// 經過linkTemplate設置鏈接線的樣式 myDiagram.linkTemplate = $(go.Link, { routing: go.Link.Orthogonal, corner: 5 }, $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // 沒有箭頭 /* $(go.Shape, {strokeWidth:2}, new go.Binding("stroke", "color") // 鏈接線樣式 ), $(go.Shape, {toArrow: "Standard", stroke:null}, // 箭頭樣式 new go.Binding("fill", "color") ) */ ); var model = $(go.TreeModel); model.nodeDataArray = [ { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Demeter", source: "cat2.png" }, { key: "3", parent: "1", name: "Copricat", source: "cat3.png" }, { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "cat5.png" }, { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" } ]; myDiagram.model = model;
運行結果