Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[g] Path 路径动画遇到多段路径插值报错 #1275

Closed
xiaoiver opened this issue Feb 3, 2023 · 3 comments
Closed

[g] Path 路径动画遇到多段路径插值报错 #1275

xiaoiver opened this issue Feb 3, 2023 · 3 comments
Assignees
@xiaoiver
Labels
bug

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Feb 3, 2023 •
edited

复现链接：https://g2.antv.antgroup.com/zh/examples/general/point#point-shape

M 100 100 L 200 100 M 150 50 L 150 150 -> M 100 100 L 200 100

原因是 morph 动画目前会将路径命令转成 C，前者转换成类似（省略参数）：M C C C M C C C，这样与 M C C C 就对应不上了，M 如果对应到 C 就会造成数组长度不一致（前者为 3 后者为 7）导致无法插值。

很多做形变的 SVG 库例如 svgMorph 都无法处理多段 subpath，需要使用者手动拆分成多个 <path> 元素才行：

Similar to the svgMorph component, this component doesn't provide multipath processing so we should split the sub-paths into multiple shapes

另外为了“看起来更自然”的过渡效果，需要配合一些 SVG 编辑器对路径进行修改。例如下图三个图形看起来一样，实际上路径定义不同：
Feb-03-2023 17-20-34
@xiaoiver xiaoiver self-assigned this Feb 3, 2023
@xiaoiver xiaoiver added the bug label Feb 3, 2023
@xiaoiver
Copy link
Contributor Author

xiaoiver commented Feb 6, 2023

antvis/G2#4615

@pearmini
Copy link
Member

pearmini commented Feb 6, 2023

牛逼牛逼！

@xiaoiver
Copy link
Contributor Author

xiaoiver commented Feb 6, 2023 •
edited

暂时的解决方式是避免在形变动画中使用 subpath，比如上面例子的 crosshair 可以用一段 path 表示。通过路径中 M 命令的数目可以判断是否包含多段 subpath

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@xiaoiver xiaoiver

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@xiaoiver @pearmini