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.

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

[Improvment] 边使用Bezier曲线时,边和箭头的左侧边缘没有居中对齐的问题 #951

Open
wangzhengbo opened this issue Dec 19, 2022 · 10 comments · Fixed by #1244
Labels
优化 New feature or request

Comments

@wangzhengbo
Copy link

wangzhengbo commented Dec 19, 2022

image

如上,如果起始和结束节点不在一条水平线上,使用Bezier曲线时,边终点部分和箭头左侧的边没有居中对齐,看上去效果不是很完美。有什么好的处理方式吗?

@wangzhengbo wangzhengbo changed the title [Improvment] 边使用Bezier曲线时,边和箭头的的左侧边缘没有居中对齐的问题 [Improvment] 边使用Bezier曲线时,边和箭头的左侧边缘没有居中对齐的问题 Dec 19, 2022
@wangzhengbo
Copy link
Author

wangzhengbo commented Dec 19, 2022

目前的处理方式是,继承BezierEdge,覆写getEdge方法,将线的终点的横坐标改小10px。

@wangzhengbo
Copy link
Author

image

@wumail
Copy link
Collaborator

wumail commented May 17, 2023

目前的处理方式是,继承BezierEdge,覆写getEdge方法,将线的终点的横坐标改小10px。

您的这种处理方式十分有效。在最新的版本中,我们给贝塞尔曲线的终点箭头增加了根据贝塞尔曲线的弯曲程度而获得一定偏转的能力,使曲线末端在很大程度上处于箭头左侧的中间位置,如果仍存在使用问题,欢迎继续提issue,如果有更好的想法欢迎提PR。

@wumail wumail closed this as completed May 17, 2023
@torisgzhang
Copy link

目前的处理方式是,继承BezierEdge,覆写getEdge方法,将线的终点的横坐标改小10px。

您的这种处理方式十分有效。在最新的版本中,我们给贝塞尔曲线的终点箭头增加了根据贝塞尔曲线的弯曲程度而获得一定偏转的能力,使曲线末端在很大程度上处于箭头左侧的中间位置,如果仍存在使用问题,欢迎继续提issue,如果有更好的想法欢迎提PR。

您好,请问这个特性支持关闭吗 ,使用贝塞尔曲线在某些场景下(设置了曲线的多个pointlist)会出现箭头错位的情况, 如下图
image

@torisgzhang
Copy link

应该不是由于pointlist导致的,就是当使用贝塞尔曲线且连线两端相差距离很远的时候箭头偏移导致很丑,
image

@towersxu
Copy link
Collaborator

towersxu commented Jun 5, 2023

@zhanglei518 能提供一个codesandbox示例吗?

@torisgzhang
Copy link

@zhanglei518 能提供一个codesandbox示例吗?

官方文档中自定义锚点的示例https://codesandbox.io/embed/logicflow-base15-ou2i0?fontsize=14&hidenavigation=1&theme=dark&view=preview, 把其中一个节点添加大量数据,然后连接其最下面一个锚点到另一个节点(或者其中一个节点拖到很下面,即:两个节点y坐标相差很大即可复现)
image

@torisgzhang
Copy link

@zhanglei518 能提供一个codesandbox示例吗?

官方文档中自定义锚点的示例https://codesandbox.io/embed/logicflow-base15-ou2i0?fontsize=14&hidenavigation=1&theme=dark&view=preview, 把其中一个节点添加大量数据,然后连接其最下面一个锚点到另一个节点(或者其中一个节点拖到很下面,即:两个节点y坐标相差很大即可复现) image

最新版本之前的处理方式就是把终点横坐标减小10 然后复写箭头 ,将箭头的svg路径d进行相应改写即可从视觉上较为完美展示,这两天测试又提了个单子,然后才发现是版本更新加入了贝塞尔曲线的箭头具有一定曲率的偏移量导致的,这种感觉不是很友好啊,使用贝塞尔曲线的时候连线的起点终点位置相差较大的场景还是比较多的

@towersxu
Copy link
Collaborator

towersxu commented Jun 7, 2023

这个是受到连线控制点影响的,如果bezier的控制点太近,确实会有这个问题。所以对于自动生成的曲线,建议先适当增加控制点离起终点的距离。

@towersxu towersxu reopened this Jun 7, 2023
towersxu added a commit to towersxu/LogicFlow that referenced this issue Jul 24, 2023
wumail added a commit that referenced this issue Jul 24, 2023
fix(core): improve the appearance of Bezier curve arrows.(#951)
@wumail wumail reopened this Jul 24, 2023
@wumail
Copy link
Collaborator

wumail commented Jul 24, 2023

TODO:
orient: 'auto' 开关

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
优化 New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants