antvis/G6

[v5] 增加 node 类型 triangle 组件 #5401

hustcc posted onGitHub

AntV Open Source Contribution Plan(可选/Optional)

  • 我同意将这个 Issue 参与 OSCP 计划 / I agree to participate in the OSCP plan

Issue 类型 / Issue Type

中级任务 / Intermediate Task

任务介绍 / Task Description

v5 将 node edge 重构成基于 G 的场景树方式,所以每一个 ui 都是属于 G 的组件(参考 React 中的概念)。

最终 triangle 类型的 node 样式如下图所示:

image

参考 DEMO:https://g6-next.antv.antgroup.com/zh/examples/item/defaultNodes/#triangle

参考说明 / Reference Description

具体实现上,可以参考 packages/g6/src/elements/nodes/circle.ts circle 类型的 node,主要需要做几个事情:

  1. rect 实现,主要是集成 base-node,实现 keyShape 方法
  2. 完备的组件类型定义
  3. 集成测试

相关设计文档:https://www.yuque.com/antv/g6/gl1iof1xpzg6ed98


认领

posted by li1615882553 about 1 year ago

认领

期望最好能年前出来哈,年前需要把整个图的绘制集成完成。

posted by hustcc about 1 year ago

认领

期望最好能年前出来哈,年前需要把整个图的绘制集成完成。

好的

posted by li1615882553 about 1 year ago

@li1615882553 可以参考我的这个五角星 PR,和三角形是非常接近的 https://github.com/antvis/G6/pull/5410

posted by hustcc about 1 year ago

@hustcc 遇到一个问题:在 triangle 的文档中,keyShapeStyle 的 r 表示三角形外接圆的半径 <img width="1299" alt="image" src="https://github.com/antvis/G6/assets/35752509/b9a01bcc-2edb-4e6e-8f8e-994dd01308b6"> 但是在实际代码计算中, r 表示内切圆的半径 <img width="856" alt="image" src="https://github.com/antvis/G6/assets/35752509/0a173b96-28f9-4ac6-b19e-7caaf1d96e3d"> 这里哪个才是正确的?

posted by li1615882553 about 1 year ago

我觉得应该是外接圆比较合适。 @Aarebecca 也帮忙看看。

posted by hustcc about 1 year ago

我觉得应该是外接圆比较合适。 @Aarebecca 也帮忙看看。

确实是使用外接圆进行绘制更合适的

posted by Aarebecca about 1 year ago

好的

posted by li1615882553 about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests