如何加clipCfg 进image shape以使得图片变成圆形？ #5009

问题描述

我有一个自定义的节点

G6.registerNode( "haloCircle", { afterDraw(cfg, group?: IGroup) { const shape: IElement = (group?.get("children") as IElement[])[0]; const halo = group?.addShape("circle", { attrs: { ...(shape.attr() as { [key: string]: ShapeCfg }), stroke: undefined, fill: me.defaultNodeConfig.defaultNodeColor, r: (shape.attr() as { r: number }).r + 10, opacity: 0, }, name: "haloShape", }); halo?.toBack(); },
}, "circle" );

可是我当我的data里，查到有人像图片时，我要把它变成这样，如何才能做到呢？

因为，我的自定义节点是override circle的，而之前我做POC时，用的是image node，所以有clipCfg 可以把图片变成圆形。 https://github.com/antvis/G6/issues/4610#event-9515597548

但用circle node时，我尝试在drawShape 时，加一个image shape.. 但如何才能使它变成圆形呢？因为没有clipCfg 之类的 group.addShape("image",{}）

或者我必须override image node,然后加上haloShape 比较好？ 我尝试了，失败了。

重现链接

(https://codesandbox.io/s/new

重现步骤

如上

预期行为

如上

平台

• 操作系统: [ Windows]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.8.17]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response