立方贝塞尔曲线 - 得到给定X的Y.

时间:2011-11-21 19:25:21

标签: vb.net math bezier css-transitions

我有一个三次贝塞尔曲线,其中给出了第一个和最后一个点(即P0(0,0)和P3(1,1))。 其他两点定义如下:cubic-bezier(0.25,0.1,0.25,1.0)(X1,Y1,X2,Y2,这些值也不得小于或大于0或1)
现在我需要做些什么来获得给定X的Y坐标,假设只有一个? (我知道在某些情况下可以存在多个值,但让我们把它放在一边。我不是在这里做火箭科学,我只是希望能够每秒多次获得Y来进行转换)

我设法挖掘了这个:y coordinate for a given x cubic bezier,但我不明白xTarget代表什么。
哦,这也没有任何功课,我对有关互联网上的立方贝塞尔曲线没有可理解的事实感到有些恼火。

2 个答案:

答案 0 :(得分:19)

如果你有

P0 = (X0,Y0)
P1 = (X1,Y1)
P2 = (X2,Y2)
P3 = (X3,Y3)

然后对于t中的任何[0,1],你会得到坐标所给出的曲线上的一个点

X(t) = (1-t)^3 * X0 + 3*(1-t)^2 * t * X1 + 3*(1-t) * t^2 * X2 + t^3 * X3
Y(t) = (1-t)^3 * Y0 + 3*(1-t)^2 * t * Y1 + 3*(1-t) * t^2 * Y2 + t^3 * Y3

如果您获得x值,则需要找到t[0,1]个值与曲线上该点对应的值,然后使用这些t值找到y坐标。

在上面的X(t)等式中,将左侧设为x值并插入X0X1X2,{{1} }。这将为您提供具有变量X3的三次多项式。您为t解决此问题,然后将t值插入t等式以获得Y(t)坐标。

解决cubic polynomial是棘手的,但可以通过仔细使用其中一种方法来求解三次多项式来完成。

答案 1 :(得分:0)

examples of Cubic bezier curve

P0 是曲线中 t=0 的第一个点 P3 是曲线中 t=1 的最后一个点 P1 和 P2 是您的控制点。