gojs經常使用API-畫布定義

持續更新中

基礎畫布定義API
畫布初始位置 initialContentAlignment: go.Spot.Center,
畫布位置,定義後就不能拖動畫布了，畫布位置交由gojs管理 contentAlignment:go.Spot.Center,
初始座標 initialPosition: new go.Point(0, 0)
禁止移動節點 allowMove:false
禁止複製 allowCopy: false
禁止刪除 allowDelete:false
禁止選中 allowSelect:false
禁止縮放  allowZoom: false
禁止撤銷和重作  "undoManager.isEnabled": false
禁止水平拖動畫布
禁止水平滾動條 allowHorizontalScroll: false
禁止垂直拖動畫布

禁止垂直滾動條

allowVerticalScroll: false
只讀 isReadOnly: true
畫布初始化動畫時間 "animationManager.duration": 600
禁止畫布初始化動畫 "animationManager.isEnabled": false
畫布比例 scale:1.5
畫布比例自適應

autoScale

autoScale:go.Diagram.Uniform,//自適應

autoScale:go.Diagram.UniformToFill,//自適應

autoScale:go.Diagram.None,//默認值不自適應

畫布最小比例 minScale:1.2,
畫布最大比例 maxScale:2.0,
顯示網格 "grid.visible":true,
畫布邊距padding
padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)

畫布節點連線定義

 

validCycle:go.Diagram.CycleDestinationTree 只容許有一個父節點

validCycle:go.Diagram.CycleNotUndirected

validCycle:go.Diagram.CycleNotDirected  

validCycle:go.Diagram.CycleSourceTree

禁止鼠標拖動區域選中dragSelectingTool
"dragSelectingTool.isEnabled" : false, 

或者在畫布對象myDiagram建立後再調用

myDiagram.toolManager.dragSelectingTool.isEnabled = false ;

畫布節點連線定義validCycle，可能理解有誤，有問題麻煩誤留言矯正,慢慢測中，先留個位置
默認無限制 validCycle:go.Diagram.CycleAll  節點之間連線隨便連
一個節點只容許有一個父節點，而且沒有定向循環（僅容許維護樹結構的連接）

validCycle:go.Diagram.CycleDestinationTree
禁止A→C,B→C

節點的有效連接不會在圖中產生有向循環
validCycle:go.Diagram.CycleNotDirected  

禁止A-B-C-A
節點的有效連接不會在圖中產生無向循環
validCycle:go.Diagram.CycleNotUndirected

？？？測不出來
一個節點只容許有一個子節點而且沒有定向循環。 validCycle:go.Diagram.CycleSourceTree 禁止A→B,A→C
 

畫布監聽事件API
 
節點生成事件 externalobjectsdropped
線生成事件 LinkDrawn
線從新鏈接事件 LinkRelinked
刪除後事件 SelectionDeleted
刪除前事件 SelectionDeleting 例子入口
節點移動事件 SelectionMoved
//監聽節點或線的刪除事件
myDiagram.addDiagramListener("SelectionDeleted", function(e) {
e.subject.each(function(n){
console.log(n.data.key);
});
})
自動佈局API
PS:這裏只寫比較經常使用佈局，其餘佈局請查詢官網API
網格佈局 go.GridLayout
力導向佈局 go.ForceDirectedLayout
樹形佈局 go.TreeLayout
徑向佈局(須要引RadialLayout.js) RadialLayout
//用例定義畫布節點爲網格佈局
myDiagram =
$(go.Diagram, "myDiagramDiv", // 畫布定義
{layout:$(go.GridLayout, //自動佈局定義，設置爲網格佈局
{ comparer: go.GridLayout.smartComparer,//設置從小到大排序
spacing: go.Size.parse("20 20"),//設置節點間隔
comparer: function(a, b){
//重寫佈局算法,根據其餘屬性值從新增設置順序
var ay = a.data.type;
var by = b.data.type;
if(!!ay&&!!by){
if(ay > by) return -1;
if(ay < by) return 1;
}else if(!!ay){
return -1;
}else if(!!by){
return 1;
}
}
});
});

略
---------------------
做者：麋鹿的二狼
來源：CSDN
原文：https://blog.csdn.net/qq_29287561/article/details/81066004
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

gojs經常使用API-畫布定義