gojs經常使用API (中文文檔)

經常使用API   操做類API

	API	例子	應用場景
添加節點	myDiagram.model.addNodeData(node);	var node = {}; node["key"] = "節點Key"; node["loc"] = "0 0";//節點座標 node["text"] = "節點名稱"; myDiagram.model.addNodeData(node);	經過按鈕點擊，添加新的節點到畫布
刪除選中節點	myDiagram.commandHandler.deleteSelection();	if (myDiagram.commandHandler.canDeleteSelection()) { myDiagram.commandHandler.deleteSelection(); return; }	頁面上有個按鈕點擊，能夠刪除選擇的節點和線
獲取當前畫布的json	myDiagram.model.toJson()	var model= myDiagram.model.toJson();得到整個畫布的json //model=eval('('+model+')');若格式異常抓一下 var nodes=model.nodeDataArray;取出全部節點 var Links=model.linkDataArray;取出全部線	獲取當前畫布的全部元素的json,用來保存
加載json刷新畫布	myDiagram.model = go.Model.fromJson(model);	model=myDiagram.model.toJson() myDiagram.model = go.Model.fromJson(model);	通常用來刷新和加載畫布上的元素
經過節點key獲取節點	myDiagram.model.findNodeDataForKey('key')	var node = myDiagram.model.findNodeDataForKey('key');	知道節點key ,拿到這個節點的詳細信息
更改節點屬性值	myDiagram.model.setDataProperty(node, 'color', "#ededed");	var node = myDiagram.model.findNodeDataForKey('key');//首先拿到這個節點的對象 myDiagram.model.setDataProperty(node, 'color', "#ededed");//而後對這個對象的屬性進行更改	更改節點的顏色，或者大小等
獲取得到焦點的第一個元素，可爲節點或者線	myDiagram.selection.first()	var node=myDiagram.selection.first(); console.log(node.data.key);
獲取全部得到焦點的節點	myDiagram.nodes	var items=''; for(var nit=myDiagram.nodes;nit.next();){ var node=nit.value; if(node.isSelected){ items+=node.data.key+","; } } console.log(items);
遍歷整個畫布的節點信息寫法1		for(var nit=myDiagram.nodes;nit.next();){ var node=nit.value; var key=node.data.key; var text=node.data.text; }
給節點添加線	myDiagram.model.addLinkData({ from: "節點的Key", to: "連到另外一節點的key" })
選中節點		var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" }; myDiagram.model.addNodeData(newdata); var newdat2= myDiagram.model.findNodeDataForKey('-3'); console.log(newdat2); var node = myDiagram.findNodeForData(newdat2); console.log(node); myDiagram.select(node);//選中節點
特殊案例API用法	myDiagram.findNodeForData(objNode) myDiagram.findLinkForData(objLink)	其中objNode或者objLink,只能從畫布的json 對象取出， 不能直接手寫例如 var newdata={"text":"AAAA","key":-33,"loc":"0 0"}; var node = myDiagram.findNodeForData(newdat2); 除了恰好是新建的節點外，，否則是獲取不到這個對象的，由於添加節點時，gojs會自動給節點或者線添加一個屬性

經常使用事件定義API，和用法

應用場景	關鍵字	例子	例子描述
節點選中改變事件	selectionChanged: 回調的函數方法名 //該屬性要寫在$(go.Node,）內用大括號括起來，如右側例子	myDiagram.nodeTemplate = $(go.Node, "Horizontal", { selectionChanged: nodeSelectionChanged }, //節點選中改變事件，nodeSelectionChanged爲回調的方法名 $(go.Panel, "Auto", $(go.Shape,//節點形狀和背景顏色的設置 { fill: "#1F4963" }, new go.Binding("fill", "color") ), ) );//go.Node的括號 //回調方法 function nodeSelectionChanged(node) { if(node.isSelected) {// //節點選中執行的內容 console.log(node.data);//節點的屬性信息 console.log(node.data.key);//拿到節點的Key,拿其餘屬性相似 var node1 = myDiagram.model.findNodeDataForKey(node.data.key); myDiagram.model.setDataProperty(node1, "fill", "#ededed"); } else { //節點取消選中執行的內容 var node1 = myDiagram.model.findNodeDataForKey(node.data.key); myDiagram.model.setDataProperty(node1, 'fill', "1F4963 "); } } 節點選中的時候是一種顏色，取消選中是另外一種顏色
節點雙擊事件	doubleClick : function(e, node){ //node爲當前雙擊的節點的對象信息 //該屬性要寫在$(go.node,）內用大括號括起來，如右側例子 }	myDiagram.nodeTemplate = $(go.Node, "Horizontal", $(go.Panel, "Auto", $(go.Shape,//節點形狀和背景顏色的設置 { fill: "#1F4963" }, new go.Binding("fill", "color") ), {doubleClick : function(e, node){// 雙擊事件 handlerDC(e, node);//雙擊執行的方法 } } ) );//go.Node的括號 //雙擊執行的方法 function handlerDC(e, obj) { var node = obj.part;//拿到節點的json對象，後面要拿什麼值就直接.出來 var procTaskId = node.data.key; var procTaskName = node.data.text; var description = node.data.description; var procTmplId = node.data.tmplId; } 該例子主要應用場景爲，雙擊節點，獲得節點的詳細信息，彈出窗口修改節點的信息，
從Palette拖過來節觸發的事件	myDiagram.addDiagramListener("externalobjectsdropped", function(e) { console.log(e); })	myDiagram.addDiagramListener("externalobjectsdropped", function(e) { e.subject.each(function(n){ //獲得從Palette拖過來的節點 console.log(n.data.key); }); })
當前畫布被拖動的節點	未測試，線保存	myDiagram.addDiagramListener("Modified", function(e) { myDiagram.isModified = false; iter = myDiagram.selection.iterator; while (iter.next()) { var part = iter.value; if (part instanceof go.Link) { if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined ) ) { myDiagram.model.setDataProperty(part.data, 'link-color', 'red'); console.log(part.data); console.log("非法"); } else if(part.data.from > 0 || part.data.from < 0 ) { var node = myDiagram.findNodeForKey(part.data.from); if (!node) { console.log("非法"); } }else if(part.data.to > 0 || part.data.to < 0 ) { var node = myDiagram.findNodeForKey(part.data.to); if (!node) { console.log("非法"); } } } }

 

畫布基本定義類API

定義gojs在全局的簡潔符號（扯淡不知道怎麼描述）	var $ = go.GraphObject.make;
定義畫布的基本屬性	myDiagram = $(go.Diagram, "myDiagram", //畫布綁定的Div的ID { initialContentAlignment: go.Spot.Center, //畫布的位置設置（居中，靠左等） allowDrop: true, // must be true to accept drops from the Palette "LinkDrawn": showLinkLabel, // "LinkRelinked": showLinkLabel, "animationManager.duration": 600, //畫布刷新的加載速度 "undoManager.isEnabled": true, //"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, allowZoom: true //容許縮放，false爲否 isReadOnly: false //是否禁用編輯 false否， true是 //ismodelfied:true //禁止拖拽 });	沒寫的註釋的就是忘了， 這裏綁定畫布所用的div,並保存在myDiagram中，後續的節點設置均使用這個變量，意思是在這個畫布上定義節點和操做節點

 

畫布元素屬性定義類API

	api	例子
定義單種節點	myDiagram.nodeTemplate=$(go.Node,***) //***爲對節點的定義	myDiagram.nodeTemplate = $(go.Node, "Horizontal", { selectionChanged: nodeSelectionChanged }, //節點選中改變事件，nodeSelectionChanged爲回調的方法名 $(go.Panel, "Auto", $(go.Shape,//節點形狀和背景顏色的設置 { fill: "#1F4963", stroke: null } ), $(go.TextBlock, { font: "bold 13px Helvetica, bold Arial, sans-serif",//字體 editable：true, stroke: "white",//顏色 margin: 3 }, new go.Binding("text", "key") )//go.TextBlock,的括號 )//go.Panel 的括號 );//go.Node的括號
定義多種節點(畫布上有多種節點)	myDiagram.nodeTemplateMap.add("A種節點",$(go.Node,***))	//一種類型的節點 myDiagram.nodeTemplateMap.add("Start", $(go.Node, "Spot", $(go.Panel, "Auto", $(go.Shape, "Circle", { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }) ) )//go.Node的括號 ); //另外一種類型的節點 myDiagram.nodeTemplateMap.add("End", $(go.Node, "Spot", $(go.Panel, "Auto", $(go.Shape, "Circle", { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }) ) )//go.Node的括號 ); //添加不一樣種類的節點 var node = {}; node["text"] = "2222"; node["key"] = "33"; node["loc"] = "0 0"; node["category"] = "Start";//category myDiagram.model.addNodeData(node);
定義線	myDiagram.linkTemplate=$(go.Link,***);

添加監聽事件

監聽節點生成事件	//添加監聽節點生成事件 myDiagram.addDiagramListener("externalobjectsdropped", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); })
監聽線生成事件	//添加監聽線生成事件 myDiagram.addDiagramListener("LinkDrawn", function(e) { console.log(e.subject.data.to); })
監聽刪除事件	//監聽節點刪除事件 myDiagram.addDiagramListener("SelectionDeleted", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); })

 

go.Shape屬性(形狀)

圓角矩形	RoundedRectangle
更多請查看API	https://gojs.net/latest/intro/shapes.html

通用屬性

stroke	邊框顏色	null爲無邊框，可填"#87CEFA"，"red"等
margin	邊框間距
visible	設置是元素是否可見	true爲可見，false爲不可見，
textAlign	文本位置	"center"居中
editable	文本是否可編輯	true，false
font	字體	"bold 8pt Microsoft YaHei, Arial, sans-serif"
fill	背景顏色	可填"#87CEFA"，"red"等
alignment	元素位置設置	go.Spot.BottomLeft/左下    go.Spot.BottomRight/右下   go.Spot.TopLeft/左上 go.Spot.TopRight/又上 alignment:go.Spot.TopRight
isMultiline	編輯時是否容許換行	默認true
maxLines:1,	設置文本顯示的最大行數
minSize:	最小大小	new go.Size(10, 16)，控制了最大大小後，文本就會自動換行了
maxSize:	最大大小

 

特殊狀況解決方案

出現的問題	解決的方案
節點或者線刪除不了	檢查，畫布的全局設置是否禁用刪除，或者節點，和線的設置禁用刪除，關鍵字 isReadOnly，或者節點綁定的事件有問題
重複調用定義畫布報錯	不能重複定義被綁定的div,應該用從新加載數據的API

 

 

 

 

版權聲明：本文爲博主原創文章，轉載請註明出處

(後續還有更新.........)