简介
1 .之前都是用的默认的位置,top,bottom,left,right之类的,简单的还是可以的,如果要精确控制位置,就不行了,现在这里学下精确控制桩的位置
布局方式1 absolute绝对定位,以整个按钮为基准
1 .支持像素值,以及百分比值
ports:{
groups:{
group1:{
attrs:{
circle:{
r:6,
magnet:true,
stroke:'#31d0c6',
fill:"#fff",
strokeWidth:2,
}
},
position:{
name:'absolute',
args:{x:0,y:0}
}
//位置操作用absolute方式,默认位置是0,0下面用的时候可以在原来的位置上重载用args
}
},
items:[
{group:'group1'},
{group:'group1'}
]
}
2 沿边框分布
1 .就是最一开始的操作
groups:{
group1:{
attrs:{
circle:{
r:6,
magnet:true,
stroke:'#31d0c6',
fill:"#fff",
strokeWidth:2,
}
},
position:'left'
//所有桩子沿着有元素的左边框排列
}
},
2 .如果是这样的话,下面在写args都没用了
3 沿一条直线分布
1 .position:{name:"line"}
groups:{
group1:{
attrs:{
circle:{
r:6,
magnet:true,
stroke:'#31d0c6',
fill:"#fff",
strokeWidth:2,
}
},
position:{
name:'line',
args:{
start:{x:0,y:0},
end:{x:100,y:180}
}
}
}
},
沿椭圆均匀分布
1 .name:"ellips eSpread"
groups:{
group1:{
attrs:{
circle:{
r:6,
magnet:true,
stroke:'#31d0c6',
fill:"#fff",
strokeWidth:2,
}
},
position:{
name:'ellipseSpread',
args:{
start:45,
}
}
}
},
2 .沿椭圆分布 name: 'ellipse'
3 .沿着圆弧旋转,现在一直都是反正的位置摆放.这个应该是桩是正方形的时候用到,圆的时候都是一样的
groups:{
group1:{
markup:[
{tagName:'rect',selector:'rect',},
{tagName:'circle',selector:'dot'}
]
,
attrs:{
rect:{
stroke:"#31d0c6",
fill:"#fff",
strokeWidth:2,
width:20,
height:20,
x:-10,
y:-10
}
},
position:{
name:'ellipseSpread',
args:{
start:45,
dr:0,
//componsateRotate:true,
compensateRotate: true
}
}
}
},
桩标签的位置
1 .先看这几个吧,后面用到的时候在详细做吧
groups:{
group1:{
markup:[
{tagName:'rect',selector:'rect',},
{tagName:'circle',selector:'dot'}
]
,
attrs:{
rect:{
stroke:"#31d0c6",
fill:"#fff",
strokeWidth:2,
width:20,
height:20,
x:-10,
y:-10
}
},
position:{
name:'ellipseSpread',
args:{
start:45,
dr:0,
//componsateRotate:true,
compensateRotate: true
}
},
label:{
//position:'left'
//position:"right"
//position:'top'
//position:"bottom"
position:'inside'
//标签位于节点内部
}
}
},
items:[
{
group:'group1',
attrs:{
text:{
text:"标签1"
}
}
//下面这个attr里面能输入text,并不是单独的label
},
{
group:'group1',
},
//自定义一个桩子
{
group:'group1',
},
{
group:'group1',
},
{
group:'group1',
},
{
group:'group1',
}
]
}
网友评论