AntV G6 点击节点时如何获取节点的不同元素

Wisper
  • 76


业务需求:点击区域1显示节点信息,点击区域2显示节点的子流程
问题:同一个节点点击事件,如何获取到点击的元素
各位大佬求救!!!

回复
阅读 531
1 个回答
✓ 已被采纳

谢谢各位已经解决,贴一下自己的解决方法

G6.registerNode("customNode", {
  draw(cfg, group) {
    const shape = group.addShape("rect", {
      attrs: {
        id: cfg.id || mainId,
        x: offsetX,
        y: offsetY + 20,
        width: width,
        height: height,
        stroke: color,
        fill: color,//此处必须有fill 不然不能触发事件
        radius: [0, 0, 6, 6]
      }
    });
    group.addShape("rect", {
      attrs: {
        x: offsetX,
        y: offsetY,
        width: width,
        height: 21,
        stroke: color,
        fill: "#fff",
        radius: [6, 6, 0, 0]
      }
    });
    group.addShape("image", {
      attrs: {
        x: offsetX + width - 24,
        y: offsetY + 2,
        width: 16,
        height: 16,
        img: cfg.infoImage,
        cursor: 'pointer',
        isInfo: 1,
        parent: mainId
      }
    });
}
...
onClick(e) {
  // 点击节点区域是否为信息icon
  const isInfo = e.target.get('attrs').isInfo
}

在画布初始化节点的时候给 shape 设置属性 isInfo 用于识别,绑定点击事件的时候就可以通过 get('attrs') 方法来区分

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏