antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

[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 posted onGitHub

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 希望各位专家给个思路,或者帮忙调整下,万分感谢!!!

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 / 其他

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

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

posted by yvonneyx 5 months ago

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

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

image image

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

posted by lhz7695001 4 months ago

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

posted by yvonneyx 4 months ago

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

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

posted by lhz7695001 4 months ago

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

posted by lhz7695001 4 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests