The issue has been closed

节点阴影实现 #4600

wwwing123 posted onGitHub

问题描述

请问这种阴影效果怎么实现？

重现链接

截图

重现步骤

截图

预期行为

想要在节点上通过样式shadow实现这种高亮效果，在不使用自定义节点的情况能通过shadow样式实现吗？请问有spread的选项可以放大阴影的大小吗？类似css的写法，box-shadow: 0 0 5px 0 #000

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

aaa 这个是效果图，目前阴影只有4个值可选，shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY,还有其他值可以选吗，例如css里拓展阴影大小

只有这四个～也许你可以把 shadowColor 设置深一些，然后 shadowBlur 大一些

posted by Yanyan-Wang almost 2 years ago

不太行，太模糊了，可能要自定义节点了

posted by wwwing123 almost 2 years ago

自定义节点在图形上也是一样的属性～设置了下 shadowBlur 可以范围大一些的

posted by Yanyan-Wang almost 2 years ago

这个效果不太理想，不想要模糊的，我意思是专门加多一个圆形的shape去实现我上面截图的效果

posted by wwwing123 almost 2 years ago

@wwwing123 你截图的效果需要专门增加一个shape 去实现的，一般这个shape我们叫它「光晕」halo，你可以访问：https://insight.antv.antgroup.com/#/dataset/case 随便创建一个画布体验下效果：

具体的代码实现可以参考：https://github.com/antvis/Graphin/blob/master/packages/graphin/src/shape/graphin-circle.ts#L32

posted by pomelo-nwu almost 2 years ago

类似中间这个，把动画去掉就好

https://g6.antv.antgroup.com/examples/scatter/node/#node

posted by Yanyan-Wang almost 2 years ago

好的，非常感谢

posted by wwwing123 almost 2 years ago

@wwwing123 如果有帮助，还望给我们点个 star 哦～让更多人看到这个项目

posted by pomelo-nwu almost 2 years ago

目测问题解决了，issue 就先关闭咯，有问题再开新 issue 哈。方便的话麻烦仓库右上角点亮一下星星～

posted by Yanyan-Wang almost 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

节点阴影实现 #4600

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect