节点类型新增 - hexagon 类型 #4783

Issue Hunt 计划（可选）

• 我同意将这个 Issue 参与 Issue Hunt 计划

Issue 难度

低难度

悬赏

请在 2023 年 8 月 30 日之前完成 PR，9 月 15 日之前完成全部 CR 意见的修改。

AntV 将支付 $10 (汇率按结算当日计)

问题描述

G6 4.x 中无此六边形节点，可参考其他（e.g. 4.x 的 star 节点，建议使用 polygon 绘制主图形 ）进行迁移，注意：

• 5.0 中的图形定义、缓存、插入方式有所不同，参考 5.0 circle 的实现：https://github.com/antvis/G6/blob/v5/packages/g6/src/stdlib/item/node/circle.ts

• 根据设计稿调整样式：

亮色：

<img width="722" alt="image" src="https://github.com/antvis/G6/assets/29593318/6fe02a41-e15e-41f4-a410-9ec709d27682">

暗色：

<img width="548" alt="image" src="https://github.com/antvis/G6/assets/29593318/4f54e90d-4df6-459f-a0c7-9bdab5e92af9">

• 继承 circle；

• 类似 circle，支持文本、文本背景、多徽标、icon、其他图形；

• 类似 circle，支持状态样式响应、动画、主题等。

重现链接

https://github.com/antvis/G6/blob/v5/packages/g6/src/stdlib/item/node/circle.ts

重现步骤

1. clone g6 代码

git clone https://github.com/antvis/G6.git

2. 拉取所有线上分支

git fetch

3. 切换到 v5 分支

git checkout v5

4. 进入 g6 包

cd packages/g6

5. 安装依赖

npm install

6. 启动 demo

npm run dev

7. 实现功能、新增 demo 以测试

demo 位于 packages/g6/tests/integration

8. 提交代码，等待 CR

9. 根据（多次） CR 建议修改

10. 等待合并入 v5 分支后，管理员支付奖金

预期行为

G6 4.x 中无此六边形节点，可参考其他（e.g. 4.x 的 star 节点，建议使用 polygon 绘制主图形 ）进行迁移，注意：

• 5.0 中的图形定义、缓存、插入方式有所不同，参考 5.0 circle 的实现：https://github.com/antvis/G6/blob/v5/packages/g6/src/stdlib/item/node/circle.ts

• 根据设计稿调整样式（见上图）；

• 继承 BaseNode；

• 类似 circle-node，支持文本、文本背景、多徽标、icon、其他图形；

• 类似 circle-node，支持状态样式响应、动画、主题等。

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [5.0.0-alpha ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response