问题标签 [cubic-bezier]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
409 浏览

java - 贝塞尔曲线:强制 4 点曲线通过 3D 空间中的控制点

我已经阅读了该线程以使这发生在 4 点上,但仅在此处的 2D 空间中。

我已经实现了 3D 的答案,但这里只针对 3 个控制点

我读过这篇文章,但不理解 sudo 代码或数学

任何人都可以在java中简化吗?我不想将曲线绘制为 3 点的 2 段

0 投票
1 回答
857 浏览

c# - 如何找到贝塞尔曲线的控制点?

我需要在 C# (Unity) 中以曲线的形式实现连接。我希望得到与 Miro.com 中的实现尽可能相似的结果(见截图)。

附加曲线后,我计算三次贝塞尔曲线的路径。对于第一段,使用锚点和与其连接的对象的偏移量。在这个阶段没有任何问题。

问题:当通过单击并拖动线段的一个蓝点(见截图)将曲线分割成线段时,它在中间被一分为二。在两条新曲线的交界处,形成了一个新的交互(可移动)点,其控制点的切线和坐标是未知的。每次交互点的位置发生变化(下图中的白点)时,我都需要找到这些控制点的位置。此外,曲线在分割时不应剧烈改变其位置,而不是形成循环,具有不同长度的控制点向量(我不确定这里)并尽可能充分地表现(就像在 Miro 的板上)。

控制点是指 Bezier 段的 2 个不可见的引导点。

我用黑色绘制了已知的控制点,用红色绘制了我需要找到的那些。(Pn - 交互点,Cn - 控制点) Miro.com 中的弯曲连接

我试图找到它们的算法给出了不正确的控制点距离和方向。

测试了以下算法:

  1. Interpolation from Tacent - 分离时曲线的跳跃,控制点的方向和缩进量不合适;
  2. Chaikin 算法 - 分离过程中的曲线跳跃,创建循环;
  3. 基于猜测的“自定义”插值(考虑到线段起点和终点之间到线段中心的距离,以及起点和终点之间的方向) - 有所有相同的问题,但看起来比上面的稍微好一点。

我怀疑解决方案是使用 Catmull-Rom 样条对点进行弦内插,并将结果转换为贝塞尔曲线的点。但是,实施上仍然存在问题。

来自 3DMax 的曲线看起来也非常相似。在他们的文档中,我发现只提到了参数曲线。

3DMax中的曲线 米罗的相同曲线

我没有使用(或不起作用)的方法:

  1. Catmull-Rom 插值;
  2. B样条插值;
  3. 厄米插值;
  4. De Casteljau 的算法(虽然它似乎不适合这个)

我将非常感谢任何帮助,但我要求尽可能详细。

0 投票
0 回答
28 浏览

python - 使用贝塞尔曲线闭合形状

在我的作业中,我尝试使用贝塞尔曲线创建一个形状。我使用了贝塞尔插值法,但因为我错过了最后一条曲线,因为当我求解线性方程组时,我假设边缘的二阶导数为 0。

我想知道是否有办法绘制一个封闭的形状并连接第一个和最后一个点。到目前为止,这是我的代码。

0 投票
1 回答
84 浏览

math - 给定具有固定端点的三次贝塞尔曲线,当给定要检查的位置时,如何找到沿它的点的 x 位置?

假设我有一个带有两个固定端点的贝塞尔曲线,一个在(左下角和右上角) x(0), y(1),一个在x(1), y(0)(左下角和右上角)现在假设我有两个控制点,可以在 x(0), x(1 )、y(0) 和 y(1)。对于这个问题,我只想说控制点 #1 在 x(0.1) y(0.6) 处,控制点 #2 在 x(0.9) 和 y(0.4) 处。(这假设一个“从左上角”坐标系)

这是我们曲线的一个小例子:

我们的贝塞尔曲线

现在假设我的位置为 0.7。计算出对应的 x 位置到 y(0.7) 点的数学会是什么样子?我该怎么做?


抱歉,如果这个问题不属于这里,但我认为这是编码中面临的一个常见问题,并且可能你们中的许多人都有我正在寻找的答案。

0 投票
0 回答
27 浏览

graphics - 给定起点和终点,如何找到三次贝塞尔曲线的控制点?

三次贝塞尔曲线

嘿,请检查图片 URL 以更好地理解问题。

当我有两个端点(红色点)时,我想找到控制点(绿色)。我试图得到一个公式来帮助我预测这个值。

另外,我需要对面的两个控制点。

0 投票
0 回答
53 浏览

flutter - 将一个 Path.cubicTo 调用分解为两个

我有一条使用单个调用Path.cubicTo在两点之间绘制的路径。我现在需要根据路径中的可变位置将该路径绘制在两个路径段中。

我需要看起来像原来的单个cubicTo调用的路径,但我需要让它实际上是两个不同的点集之间的两个独立的调用?

我的最终目标是让路径看起来与单个调用相同,但不同的是路径的可变数量以不同的颜色绘制。

0 投票
0 回答
50 浏览

javascript - 用于查找给定时间和两个控制点的进度的三次贝塞尔函数

我试图找到一个 JS 算法来找到给定 xpos 的三次贝塞尔曲线的 ypos。第一个和最后一个控制点将是 (0,0) 和 (1,1),如果任何输入的控制点的 xpos 小于 0 或大于 1,它应该抛出错误,就像在 CSS 中一样。该函数将被称为

我花了大约半个小时在谷歌上搜索它,但似乎没有任何效果。我在寻找算法时只找到了一堆数学公式。即使我将目光转向stackoverflow,除了复杂的数学公式和c ++中的东西外,我找不到任何东西,
左上角将是p1,另一点是p2。

贝塞尔曲线

0 投票
1 回答
48 浏览

svg - 如何获得多贝塞尔曲线段的起点?

I have such curve as d="m 8.6934523,43.845239 c 0,0 -3.0238096,-6.236608 -3.2127975,-11.90625 C 5.2916666,26.269345 6.047619,17.197916 10.961309,13.418155 15.875,9.6383926 20.032738,8.315476 28.537201,9.0714284"

并且需要在绝对坐标段开始的地方分割曲线(“C 5.2916666,26.26.9345 ....”)。我必须将该段表示为视图“mx,y C 5.2916666,26.26.9345 ....”中的另一条曲线。解决方案为“m 0,0 C 5.2916666,26.26.9345 ....”在这种情况下不适合:(并且作为前一段的最后一个控制点的起点不起作用(我相信这是因为切换到绝对坐标)。

我应该以某种方式计算上一段的起点吗?或者是否有相应的文献(在文档中没有数据,除了这种称为polybezier的曲线)?

0 投票
0 回答
33 浏览

cubic-bezier - 在已知 P0、P3 和 B(t) 的情况下找到 Bezier 控制点 P1 和 P2

我将在 LUA 中执行此操作。二维三次贝塞尔曲线。

我知道曲线的起点和终点,并且我有一个已知的 x,y,t 任意点。

我试图将 de Casteljau 应用于此:

  • 我知道我想找到 P[1][0] 和 P[2][0],因为我知道 P[0][0] 和 P[3][0] 和 P[0][3]。
  • 我知道 P[i][j] = (1-t)P[i][j-1] + (t)P[i+1][j-1]

但是我无法找到一种方法来完成我所拥有的解决方案链。

我已经在这个论坛和其他论坛上搜索了这方面的信息,但我发现没有一个给出具体的解决方案编码方法。

任何帮助都将不胜感激,即使它是“如果不对……做出假设就无法完成”

0 投票
1 回答
38 浏览

css - 连续贝塞尔动画,不继承变化时的缓动功能

我有这个动画,它目前只是在开始时很快,但是当它达到 85% - 95% 时,三次贝塞尔曲线应该持续缓慢,而不是再次从点 0 开始并创建另一个快速启动动作。有没有办法为每个动画状态变化添加多个三次贝塞尔曲线,或者让缓动函数在状态之间连续?