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

时间:2019-04-04 00:48:42

标签: javascript bezier cytoscape.js cytoscape

我正在尝试类似地成形边缘:

所需边缘/曲线的静态模拟

static mock of desired edges/curves

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

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

如果我能够用“出租车”曲线样式平滑90度曲线,那似乎也行得通,尽管这似乎不太可能。

任何建议表示赞赏。谢谢。

1 个答案:

答案 0 :(得分:0)

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

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

第一条曲线的起点为$_SERVER['REDIRECT_URL'] ,终点为P0=(XA, YA)

第一个控制点必须与起点位于同一水平线,第二个控制点-与终点应位于同一垂直线

P3=((XA + XB)/2, ((YA + YB)/2)

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

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

DY = (Y3 - X0) / 3