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-画布定义