search

antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.03k stars 1.31k forks source link

iconClipPath 无效 #6098

Closed abc3660170 closed 1 month ago

abc3660170 commented 1 month ago

Describe the bug / 问题描述

  1. 5.0.10 版本, nodes[0]->style->iconClipPath中正确了设置了DisplayObject， 不仅不会出现裁切效果，还会导致icon消失

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

Aarebecca commented 1 month ago

clipPath 目前采用的全局坐标系（系底层渲染引擎问题，导致使用有所不便），因此导致 icon 被裁切掉了，后面会优化该问题

abc3660170 commented 1 month ago

如果是底层渲染引擎问题，那这个会在@antv/g 中优化是吧

Aarebecca commented 1 month ago

如果是底层渲染引擎问题，那这个会在@antv/g 中优化是吧

过去 g 提供的 clipPath 确实是使用的相对位置，不过后来由于某些因素变更为了绝对位置。如果你只想想简单的给 icon 添加圆形裁切（比如显示为矩形图片展示为圆形），后续 G6 会基于 radius 来自动添加 clipPath。 如果你想更自定义的 clipPath，可能也依赖 G6 侧进行相关优化适配

abc3660170 commented 1 month ago

我感觉80%以上的需求通过IconRadius就能解决了，矩形的照片在圆形节点中为裁切的情况下实在是绷不住。