渲染图片节点

• node节点定义

    antv/g6中内置了image节点进行图片的渲染，代码如下：

const data= {
      // 节点
      nodes: [
        {
            id: '1',
            type: 'image',
            img: Url,//图片地址
            size: [50, 50],
      },
       {
            id: '2',
            type: 'image',
            img: Url,
            size: [50, 50],
      }
      ],
      // 边
      edges: [
        {
          target:'1',
          source:'2'
        }
       ],
};

• 实现效果

自定义图片节点

• 自定义节点

    antv/g6中内置的image类型无法实现带边框的功能，需要我们自定义图片节点。

    在自定义的图片节点中，定义两个shape，rect和image，rect用来展示边框，image用来展示图片，代码如下：

 G6.registerNode(
        'img',
        {
          draw: (cfg, group) => {
            let size = cfg.size
            const nodeSizeX = size[0]
            const nodeSizeY = size[1]
            let offsetX = -nodeSizeX / 2
            let offsetY = -nodeSizeY / 2
            const borderSizeX = size[0] + 2
            const borderSizeY = size[1] + 2
            let borderOffsetX = -borderSizeX / 2
            let borderOffsetY = -borderSizeY / 2
            group.addShape('rect', {
              draggable: true,
              attrs: {
                x: borderOffsetX,
                y: borderOffsetY,
                width: borderSizeX,
                height: borderSizeY,
                stroke: '#b88230',
                lineWidth: 1,
              },
            })
            const shape = group.addShape('image', {
              draggable: true,
              attrs: {
                x: offsetX,
                y: offsetY,
                width: nodeSizeX,
                height: nodeSizeY,
                img: cfg.img,
              },
            })
            return shape
          },
        },
        'single-node'
      )

• 定义node节点数据

const data= {
      // 节点
      nodes: [
        {
            id: '1',
            type: 'img',
            img: Url,//图片地址
            size: [50, 50],
      },
       {
            id: '2',
            type: 'img',
            img: Url,
            size: [50, 50],
      }
      ],
      // 边
      edges: [
        {
          target:'1',
          source:'2'
        }
       ],
};

• 实现效果