javascript - Are there any options for inverting a bezier curve? (cytoscape.js)

Question

I'm trying to shape my edges similarly to this:

static mock of desired edges/curves

I'm able to create "S" shaped curves, but i would like them to invert when going downwards from the root node (similarly to the picture). I haven't noticed anything in the docs that describes settings to do this.

I have a demo here: https://codesandbox.io/s/l5m6mnlqrz

What could also work is if I were able to smooth out the 90 degree curve with the "taxi" curve-style, although this doesn't seem possible.

Any suggestions appreciated. Thanks.

标签： javascriptbeziercytoscape.js

Answer 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) / 3和DY = (Y3 - X0) / 3m 然后改变分母以获得所需的曲线形式

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

 (X3, Y3), (X3, Y3 + DY), (XB - DX, YB), (XB, YB)