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

[Bug]: In Polyline, the marker is set to move along the edge, and the angle problem is calculated, and there is a problem of repeated jumps during movement #6601

Open
2 of 10 tasks
lhz7695001 opened this issue Dec 4, 2024 · 5 comments
Open
2 of 10 tasks

[Bug]: In Polyline, the marker is set to move along the edge, and the angle problem is calculated, and there is a problem of repeated jumps during movement #6601

lhz7695001 opened this issue Dec 4, 2024 · 5 comments
Labels
status: waiting for maintainer These issues have not yet been reviewed by a maintainer

Comments

@lhz7695001
Copy link

Describe the bug / 问题描述

在自定义边中通过创建marker后，希望marker随边移动并且随着边的方向旋转，目前通过animation.onframe()方法中获取到每一帧marker的坐标和边的target的坐标的deg，最后设置marker.setAttribute("transform", [["rotate", deg]])，出现marker在边上反复跳跃的情况，如下图：
image
market旋转代码：
image
复现链接： https://stackblitz.com/edit/vitejs-vite-ah6g4m?file=src%2FApp.vue
希望各位专家给个思路，或者帮忙调整下，万分感谢！！！

Reproduction link / 复现链接

https://stackblitz.com/edit/vitejs-vite-ah6g4m?file=src%2FApp.vue

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

No response

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
@lhz7695001 lhz7695001 added the status: waiting for maintainer These issues have not yet been reviewed by a maintainer label Dec 4, 2024
@github-actions github-actions bot changed the title [Bug]: 在Polyline中，设置marker随边移动,计算角度问题，移动过程中出现反复跳动问题 [Bug]: In Polyline, the marker is set to move along the edge, and the angle problem is calculated, and there is a problem of repeated jumps during movement Dec 4, 2024
@yvonneyx
Copy link
Contributor

yvonneyx commented Dec 5, 2024

感觉可以参考 计算边上标签动态位置 的思路来实现

https://github.com/antvis/G6/blob/v5/packages/g6/src/utils/edge.ts#L63

@yvonneyx yvonneyx added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues have not yet been reviewed by a maintainer labels Dec 5, 2024
@github-actions github-actions bot added status: waiting for maintainer These issues have not yet been reviewed by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 6, 2024
@lhz7695001
Copy link
Author

感觉可以参考 计算边上标签动态位置 的思路来实现

https://github.com/antvis/G6/blob/v5/packages/g6/src/utils/edge.ts#L63

image
image

按照这个思路，是实现了效果 ，但是当边变长变弯曲，标记就飘了，感觉计算的不精确，不知道如何修正呢

@yvonneyx
Copy link
Contributor

不如考虑圆形标记或者短一点的纯白色矩形标记？

@yvonneyx yvonneyx added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues have not yet been reviewed by a maintainer labels Dec 17, 2024
@lhz7695001
Copy link
Author

不如考虑圆形标记或者短一点的纯白色矩形标记？

画个圆点这样肯定是可以，但是效果没有现在得好，我是想按照这个效果想想g6有没有计算角度更精确的做法呢？ @Yanyan-Wang 能帮忙看看吗？

@github-actions github-actions bot added status: waiting for maintainer These issues have not yet been reviewed by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 18, 2024
@lhz7695001
Copy link
Author

https://codesandbox.io/p/sandbox/nifty-frog-dnmsjf?file=%2Findex.js%3A82%2C7 这个是g6 V4版本中的实现，没发现会飘，但是v4版本导出的方法和V5不一样，可以指导一下v5如何实现marter不飘吗？ @Yanyan-Wang

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: waiting for maintainer These issues have not yet been reviewed by a maintainer
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lhz7695001 @yvonneyx