是否有反转贝塞尔曲线的选项? (cytoscape.js)

问题描述 投票:1回答:1

我试图像这样塑造我的边缘:

所需边/曲线的静态模拟

static mock of desired edges/curves

我能够创建“S”形曲线,但我希望它们在从根节点向下(与图片类似)时反转。我没有注意到描述设置的文档中的任何内容。

我在这里有一个演示:https://codesandbox.io/s/l5m6mnlqrz

如果我能够以“出租车”曲线风格平滑90度曲线,那么也可以起作用,尽管这似乎不可行。

任何建议赞赏。谢谢。

javascript bezier cytoscape.js
1个回答
1
投票

使用单个贝塞尔曲线不可能创建所需的形状,因为中心范围应该是垂直的。但是两条共轭曲线可能提供适当的结果。

对于A点(左侧)和B点(不重要 - B点是低于还是高于A):

第一条曲线有起点P0=(XA, YA)和终点P3=((XA + XB)/2, ((YA + YB)/2)

第一个控制点必须位于与起点相同的水平位置,第二个控制点位于与终点相同的垂直位置

X1, Y1 = X0 + DX, Y0
X2, Y2 = X3, Y3 - DY

参数DX and DY定义直角圆角。尝试将它们设置为DX = (X3 - X0) / 3DY = (Y3 - X0) / 3m然后改变分母以获得所需的曲线形式

第二部分是带点的镜像曲线

 (X3, Y3), (X3, Y3 + DY), (XB - DX, YB), (XB, YB)
© www.soinside.com 2019 - 2024. All rights reserved.