gojs常⽤API-节点定义
属性描述默认值port线端⼝设置
avoidable:fal 线绕开经过的节点,不从节点穿过
为才能使⽤
默认true,fal
节点定义
公⽤属性
所有节点块定义都能通⽤的属性
属性描述属性值(NaN为⾃适应,其他值为举例)
minSize最⼩范围new go.Size(50, NaN)或new go.Size(50, 200) maxSize最⼤范围同上
width宽
汽车led
height⾼
margin外边距0或new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
alignment元素位置如下,以此类推
go.Spot.BottomLeft 左
下
go.Spot.BottomRight 右
下
go.Spot.TopLeft 左上
go.Spot.TopRight 右上
go.Spot.Left
go.Spot.Right
go.Spot.Top
go.Spot.Bottom
defaultAlignment⼦元素位置go.Spot.TopRight 右上visible设置是元素是否可见fal为不可见
节点属性定义
继承使⽤Part 属性例⼦,从⽽定义节点是否可以删除选择之类的功能
$(go.Node,"Horizontal",//节点⼦元素布局定义
{ //节点继承Part的属性定义,例如
movable:fal,//禁⽌拖动
deletable:fal,//禁⽌删除
//节点的属性定义也写在这
},
$(go.Panel,//节点⾯板定义
"Auto", //节点⾯板⼦元素布局定义
$(go.Shape,//节点形状
//形状的基础属性设置,如下背景颜⾊
{ fill: "#1F4963" }
,new go.Binding("fill", "color")//
)
)//Panel块
);
go.Node 部分属性列表
avoidableMargin:
new go.Margin(12,12,12,12)
线绕开经过的节点的边距默认new go.Margin(6,6,6,6)
linkConnected
function(node, link, port) {}
节点线链接后调⽤的函数
linkDisconnected:
function(node, link, port) {}
节点线断开后调⽤的函数
树节点才能使⽤的api
isTreeExpanded:fal是否展开⼦节点默认true,fal
wasTreeExpanded:true 获取或设置从该节点开始的⼦节点是否被⽗节点上的expandTree调⽤折叠。初始值为fal。(基本没⽤到)
isTreeLeaf获取节点有没有⼦节点
treeExpandedChanged:function(node){}isTreeExpanded改变时调⽤的函数
属性描述默认值
go.Part 部分属性列表
PS:代码格式化我已经尽⼒了这⽂本编辑器的排版有问题,也不能⾼亮其中⼀部分
属性描述属性值(NaN为⾃适应,其他值为举例) zOrder:999节点显⽰层级,越⼤越上⾯默认NaN,按创建顺序排序,最先创建的在最底部deletable:fal可删除的默认true,fal
movable:fal可移动的默认true,fal
lectable: fal可选择的默认true,fal
lectionChanged: function(node) {})选中状态改变时调⽤的函数//举例,例如选中节点时同时选中节
点关联的线, //取消选中时取消选择节点关联的线 lectionChanged: function(node) { if(node.isSelected) { //获取节点关联的线
node.findLinksConnected().each(function(link) {
link.isSelected=true; }); } el { //没选中
node.findLinksConnected().each(function(link) {
link.isSelected=fal; }); } }
lectionAdorned:fal显⽰选中边框默认true,fal
lectionAdornmentTemplate⾃定义选中边框模版lectionAdornmentTemplate: $(go.Adornment, "Auto", $(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] } ), $(go.Placeholder) );
isShadowed:true显⽰阴影 默认fal,true shadowColor : "#ffda92",阴影的颜⾊默认gray shadowOfft:new go.Point(3, 3),阴影的位置偏移默认为new go.Point(6, 6) copyable:fal可复制的默认true,fal
location节点坐标
minLocation: new go.Point(0, 0),节点坐标最⼩位置默认⽆限制maxLocation: new go.Point(9999,
0),
节点坐标最⼤位置默认⽆限制
isSelected:true选中默认fasle,true(操作型属性⽆法在模板定义,只能在节点⽣成后操作)例如河北省教师资格证
节点或线对象.isSelected=true;
reshapable:true 重塑(改变shape形状边界时使⽤,将影
响节点⼤⼩)
默认fal,true,
resizable: true 可调整⼤⼩的(⼿动调整节点⼤⼩时,节
点内容显⽰区域时使⽤)
默认fal,true,
resizeCellSize: new go.Size(10, 10)可调整的范围默认⽆限制
rotatable:true可旋转的默认fal,true,
属性描述属性值(NaN为⾃适应,其他值为举例)
go.Panels(⾯板元素)
定义⼦元素在⾯板的的位置
Auto⼦元素叠加布局
Vertical⼦元素垂直布局
Horizontal⼦元素⽔平布局
Spot⼦元素Spot布局
Position⼦元素坐标布局
Table⼦元素表格布局
布局效果,如下图所⽰,灰⾊为Panels的边界范围
go.TextBlock(⽂本框元素)
属性描述属性值(NaN为不定义,其他值为举例) stroke⽂字颜⾊(边框颜⾊)"#333333"或"red"
font字体"10pt helvetica, arial, sans-rif" editable⽂本可编辑默认true,fal
textAlign⽂本位置小绿豆
minSize⽂本域最⼩范围,设置范围后才能控制换⾏和裁切
maxSize⽂本域最⼤范围
maxLines⽂本显⽰的最⼤⾏数
isMultiline允许换⾏默认true,fal
overflow ⽂本超出范围处理⽅式,
设置⽂本域范围后该属性才会⽣效
go.TextBlock.OverflowEllipsis 显⽰缩略号
go.TextBlock.OverflowClip 裁切
属性描述属性值(NaN为不定义,其他值为举例)节点、线事件定义
选中改变事件lectionChanged //注意放的是node 层回调参数也只有⼀个 $(go.Node, "Auto", { lectionChanged: function(node) { if(node.isSelected) { //选中 } el { //没选中 } } })
证券公司是做什么的
双击事件doubleClick中华上下五千年完整版
单击事件click
⿏标进⼊事件mouEnter ⿏标离开事件mouLeave
⿏标悬停事件
需要在画布定义悬停时间,该属性⽐较少⽤
500 ;
mouHover
⽤例
$(go.Node,"Horizontal",//节点⼦元素布局定义
$(go.Panel,//节点⾯板定义
"Auto", //节点⾯板⼦元素布局定义
参苓白术丸说明书$(go.Shape,//节点形状
//形状的基础属性设置,如下背景颜⾊
回忆像个说书的人
绿豆芽炒肉丝{ fill: "#1F4963" }
,new go.Binding("fill", "color")//
),
{doubleClick : function(e, node){
// 双击事件,输出节点数据
console.log(node.part.data);
},
cursor:"pointer"//改变⿏标样式变成⼩⼿
}
)//Panel块
);