javascript - 二次贝塞尔曲线 : Calculate x for any given y

标签 javascript bezier quadratic

我有一条由以下方程表示的二次贝塞尔曲线(用 x 替换 t),其中 x 介于 0-1 之间

var y = p0 * Math.pow(x, 2) + p1 * 2 * x * (1 - x) + p2 * Math.pow((1 - x), 2)

我想传入一个已知的 y 值并沿曲线求解 x。

enter image description here

我尝试重新排列二次方程来求解 x,但我得到的值都不在 0-1 范围内。

最佳答案

y = p0 * Math.pow(x, 2) + p1 * 2 * x * (1 - x) + p2 * Math.pow((1 - x), 2)

=> y = p0x^2 + 2p1(x-x^2) + p2(1-2x+x^2)
=> y = p0x2 + 2p1x - 2p1x2 +p2 - 2p2x + p2x2
=> y = p0x2 + p2x2  - 2p1x2 + 2p1x - 2p2x + p2
=> y = (p0+p2-2p1)x^2 + 2(p1 - p2)x + p2
=> 0 = (p0+p2-2p1)x^2 + 2(p1 - p2)x + (p2 - y)

这是一个简单的二次方程,通过输入 p0、p1、p2 和 y 进一步求解,您将得到 x 的方程。 x 总是有两个答案.. 丢弃否定的一个积极的答案将是你的答案

关于javascript - 二次贝塞尔曲线 : Calculate x for any given y,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40918569/

相关文章:

iOS "calculationMode"等效的 Android 动画

Android绘制动画虚线曲线

Java:不能从静态上下文中引用非静态变量

javascript - JavaScript 中的二次方程不起作用

geometry - 求两个整数二次贝塞尔曲线相交的快速方法?

javascript - 单击按钮时Angular JS刷新特定ID

javascript - 如何替换使用 ng-repeat 显示的数组中的对象?

c++ - 通过控制点的贝塞尔曲线不起作用

javascript - 停止光标,直到 javascript 中的文本区域中的文本发生更改

JavaScript fadeIn 自定义时间