Antv X6系列 (三)锚点相关

Antv X6 绝对位置,定义锚点位置

ports: {//链接桩,
    groups: {
      top: {//位置上下左右
        position: {
          name: absolute,//核心
          args: { x: 44, y: 33 },//相对于当前图标的x、y坐标
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,//设置为可以连接
            stroke: #5F95FF,//线框颜色
            strokeWidth: 1,//线框宽度
            fill: #fff,填充色
            style: {
              visibility: hidden,//默认隐藏,不显示。定位到节点, 才展示
            },
          },
        },
      },
      right: {
        position: {
          name: absolute,
          args: { x: 78, y: 60 },
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: #5F95FF,
            strokeWidth: 1,
            fill: #fff,
            style: {
              visibility: hidden,
            },
          },
        },
      },
      bottom: {
        position: {
          name: absolute,
          args: { x: 44, y: 90 },
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: #5F95FF,
            strokeWidth: 1,
            fill: #fff,
            style: {
              visibility: hidden,
            },
          },
        },
      },
      left: {
        position: {
          name: absolute,
          args: { x: 10, y: 60 },
        },
        attrs: {
          circle: {
            r: 3,
            magnet: true,
            stroke: #5F95FF,
            strokeWidth: 1,
            fill: #fff,
            style: {
              visibility: hidden,
            },
          },
        },
      },
    },
    items: [
      {
        group: top,
      },
      {
        group: right,
      },
      {
        group: bottom,
      },
      {
        group: left,
      },
    ],
  },
经验分享 程序员 微信小程序 职场和发展