美文网首页
7.2 连接桩的位置

7.2 连接桩的位置

作者: skoll | 来源:发表于2021-12-27 14:11 被阅读0次

简介

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

相关文章

  • 7.2 连接桩的位置

    简介 1 .之前都是用的默认的位置,top,bottom,left,right之类的,简单的还是可以的,如果要精确...

  • 章节 7 JDBC 概念

    目录 7.1 使用 JDBCDriverManager接口连接 MySQL 7.2 使用 JDBCStatemen...

  • 安装ecshop4.0坑

    环境 centOS 7.6 MariaDB 10.4.12 php 7.2 httpd 2.4.6 连接数据库失败

  • CAD2020-引线设置(2)

    连接位置-左/右:对于水平连接时,连接位置左,右的效果可以参照下图。连接位置的左与右是指引线部分与内容部分的相对位...

  • 光谱位置的连接

    每个波符的光谱调性位置, 都是这个波符图腾的拓展位置。 白巫师的拓展是黄种子, 拓展也是跨越挑战所拿到的能量, 释...

  • 7.2 自定义SVG桩

    简介 1 .除了调用onPortRendered函数里面重新渲染,还有一种方式,可以自定义SVG桩子

  • SQL Developer 18.2 IO 错误:Undefin

    连接驱动包位置:sqldeveloper\jdbc\lib\ojdbc8.jar(默认) 连接驱动包位置:sqld...

  • CentOS7安装MySQL数据库并开启远程连接权限

    【原文链接】 CentOS7.2安装MySql5.7并开启远程连接授权的教程 一、安装MySQL CentOS 7...

  • 记忆的本质

    记忆的本质就是进行连接。将一件自己不熟悉的事情,连接到一件自己熟悉的事情。业内术语叫做连桩。 桩有可以有很多种,最...

  • zookeeper命令等简单操作

    一、环境 环境如下 centos7.2java 1.8 二、命令行连接zookeeper 这里我把原先zooke...

网友评论

      本文标题:7.2 连接桩的位置

      本文链接:https://www.haomeiwen.com/subject/megdqrtx.html