AntV G6自定义节点多边形+图片

要求：拓扑节点根据不同的设备类型显示不同的图标，且根据设备状态显示不同的背景色，鼠标点击选中节点还可高亮

效果图

• 不同设备不同图标，不同状态不同背景色
  

• 鼠标点击选中节点高亮
  

代码

// 默认节点背景色
const defaultNodeBgColor = '#169BFA'

G6.registerNode(
  'cust-node',
  {
    draw (cfg, group) {
      // bgColor自定义的节点背景色 icon自定义的节点图标
      const { bgColor, icon } = cfg
      // 外层包裹元素
      const shape = group.addShape('polygon', {
        attrs: {
          points: [
            [16, 0],
            [32, 9],
            [32, 26],
            [16, 35],
            [0, 26],
            [0, 9]
          ],
        },
        name: 'node-wrapper'
      })
      // 背景色元素
      group.addShape('polygon', {
        attrs: {
          points: [
            [16, 2],
            [30, 10],
            [30, 25],
            [16, 33],
            [2, 25],
            [2, 10]
          ],
          fill: bgColor || defaultNodeBgColor, // 填充背景色
        },
        name: 'node-bg'
      })
      // 除主体部分白色外背景色透明的图标
      group.addShape('image', {
        attrs: {
          x: 8,
          y: 9,
          width: 16,
          height: 16,
          img: icon, // 设置图标
        },
        name: 'node-icon'
      })
      // 非高亮节点的蒙层
      group.addShape('polygon', {
        attrs: {
          points: [
            [16, 0],
            [32, 9],
            [32, 26],
            [16, 35],
            [0, 26],
            [0, 9]
          ],
        },
        name: 'node-mask'
      })
      return shape
    },
    update (cfg, node) {
      // 节点更新触发 isNodeActive是否选中
      const { bgColor, isNodeActive } = cfg
      const group = node.getContainer() // 获取容器
      // 背景色元素填充色修改
      const bgShape = group.get('children')[1] // 获取形状
      bgShape.attr({ fill: bgColor || defaultNodeBgColor }) // 修改形状的属性
      // 蒙层元素填充色修改：高亮节点蒙层不填充，非高亮节点蒙层填充透明白色
      const maskShape = group.get('children')[3] // 获取形状
      maskShape.attr({ fill: isNodeActive ? '' : 'rgba(255, 255, 255, 0.8)' }) // 修改形状的属性
    }
  },
  'single-node'
)

这篇好文章是转载于：学新通技术网