m0_60877809 2022-10-18 15:58 采纳率: 72.7%
浏览 555
已结题

关于antv G6 自定义节点问题

img

如图 我添加了一个矩形 然后在矩形里面设置了label 然后我又添加了一个黄色框框并且定位x,y在右上方了 要在黄色框框里面显示文字 但是怎么配置都不行呀 我配置了label 也不行


  G6.registerNode(
        'nodeName',
        {
          /**
           * 绘制节点,包含文本
           * @param  {Object} cfg 节点的配置项
           * @param  {G.Group} group 图形分组,节点中图形对象的容器
           * @return {G.Shape} 返回一个绘制的图形作为 keyShape,通过 node.get('keyShape') 可以获取。
           * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
           */
          draw (cfg, group) {
            console.log('cfg', cfg.label == '第二')
            if (cfg.id == '1-4-4') {
              const keyShape = group.addShape('path', {
                attrs: {
                  path: [['M', 60, -16], ['L', 60, 17], ['L', -60, 17], ['L', -60, -16], ['Z']],
                  stroke: '#fff', // 颜色应用到描边上,如果应用到填充,则使用 fill: cfg.color
                  // 节点填充色
                  fill: '#f2f2f2',
                  radius: 4,
                  cursor: 'pointer'
                },
                // must be assigned in G6 3.3 and later versions. it can be any value you want
                name: 'path-shape',
                // 设置 draggable 以允许响应鼠标的图拽事件
                draggable: true
              })
              const label = group.addShape('text', {
                attrs: {
                  x: 0, // 居中
                  y: 0,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  text: cfg.label,
                  fill: '#535D79',
                  fontSize: 14
                },
                name: 'text-shape',
                draggable: true
              })
              return keyShape
            }
            if (cfg.id == '1') {
              return {
                labelCfg: {
                  style: {
                    fill: '#fff',
                    opacity: 0
                  }
                },
                type: 'diamond',
                size: [50, 50],
                style: {
                  fill: '#fd9b30',
                  border: '10px solid red',
                  stroke: '#fec88d',
                  lineWidth: 5
                }
              }
            }

            const keyShape = group.addShape('path', {
              attrs: {
                path: [['M', 60, -16], ['L', 60, 17], ['L', -60, 17], ['L', -60, -16], ['Z']],
                stroke: '#008aeb', // 颜色应用到描边上,如果应用到填充,则使用 fill: cfg.color
                // 节点填充色
                fill: '#fff',
                radius: 4,
                cursor: 'pointer'
              },
              name: 'path-shape',
              // 设置 draggable 以允许响应鼠标的图拽事件
              draggable: true
            })

            //  group.addShape('rect', {
            //     attrs: {
            //       stroke: '#008aeb', // 颜色应用到描边上,如果应用到填充,则使用 fill: cfg.color
            //       // 节点填充色
            //       fill: '#fff',
            //       width: 120,
            //       height: 34,
            //       radius: 4,
            //       cursor: 'pointer'
            //     },
            //     // must be assigned in G6 3.3 and later versions. it can be any value you want
            //     name: 'path-shape',
            //     // 设置 draggable 以允许响应鼠标的图拽事件
            //     draggable: true
            //   })
            group.addShape('rect', {
              attrs: {
                fill: '#fff849',
                width: 10,
                height: 10,
                x: 45,
                y: -20,
                shadowColor: '#000',
                shadowBlur: 1,
                // radius: 7.5,
                cursor: 'pointer',
                label: '1',
                labelCfg: {
                  style: {
                    fill: '#666',
                    fontSize: 14
                  }
                }
              },
              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: 'path-shape',
              // 设置 draggable 以允许响应鼠标的图拽事件
              draggable: true
            })

            if (cfg.label) {
              // 如果有文本
              // 如果需要复杂的文本配置项,可以通过 labeCfg 传入
              const style = (cfg.labelCfg && cfg.labelCfg.style) || {}
              style.text = cfg.label
              group.addShape('text', {
                attrs: {
                  x: 0, // 居中
                  y: 0,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  text: cfg.label,
                  // 文本颜色
                  fill: '#535D79',
                  // 文本字体大小
                  fontSize: 14
                },
                name: 'text-shape',
                draggable: true
              })
            }

            return keyShape
          }
        },
        // 继承内置节点类型的名字,例如基类 'single-node',或 'circle', 'rect'// 当不指定该参数则代表不继承任何内置节点类型
        'single-node'
      )
  • 写回答

2条回答 默认 最新

  • 撸空投的菜鸟 2022-10-18 16:14
    关注

    需要再加一个group.addShape('text')来添加方框里的文字

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月19日
  • 已采纳回答 10月19日
  • 创建了问题 10月18日

悬赏问题

  • ¥15 关于c++外部库文件宏的问题,求解
  • ¥15 office打开卡退(新电脑重装office系统后)
  • ¥300 FLUENT 火箭发动机燃烧EDC仿真
  • ¥15 【Hadoop 问题】Hadoop编译所遇问题hadoop-common: make failed with error code 2
  • ¥15 vb6.0+webbrowser无法加载某个网页求解
  • ¥15 RPA财务机器人采购付款流程
  • ¥15 计算机图形多边形及三次样条曲线绘制
  • ¥15 根据protues画的图用keil写程序
  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误