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

标签 javascript bezier cytoscape.js

我正在尝试像这样塑造我的边缘:

所需边/曲线的静态模拟

static mock of desired edges/curves

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

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

如果我能够使用“出租车”曲线样式来平滑 90 度曲线,那也可以工作,尽管这似乎不可能。

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

最佳答案

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

对于点 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 和DY 定义直 Angular 的舍入。 尝试将它们设置为 DX = (X3 - X0)/3DY = (Y3 - X0)/3m 然后改变分母以获得所需的曲线形式

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

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

关于javascript - 是否有反转贝塞尔曲线的选项? (cytoscape.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55506293/

相关文章:

java - 三次贝塞尔曲线 : Maximum Gradient and Collision Avoidance?

javascript - Cytoscape.js 动画节点颜色

iOS : Animate transformation from a line to a bezier curve

javascript - 在javascript中有效地分割贝塞尔曲线

cytoscape.js 布局,允许在复合中定位子项(例如,像点的等级)

javascript - Cytoscape.js 中节点和边的内联编辑器

javascript - 将带有 AJAX 的变量传递给 PHP 以填充下拉菜单时出现问题

javascript - 链接页面的 HTML/JS 解释对话框

javascript - Liferay 和 ExtJS

javascript - 水平显示表格