7.2 连接桩的位置

简介

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',
                    }
                ]
            }