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')