javascript - 找到位于二次曲线上的两点之间的控制点

Question

我在两点之间绘制一条二次曲线，然后在该曲线上找到一个随机点。我想突出显示随机点和终点之间的曲线部分。

所以我想在随机点和终点之间再找一个控制点，然后在原来的曲线之上再画一条不同笔触颜色的二次曲线。

有没有可能找到这样的点？或者还有其他方法可以完成这个任务吗？

这是我正在处理的一段代码:

var startpoint = {x: 50, y: 50}; // Red
var endpoint = {x: 50, y: 250}; // Green
var controlpoint = {x: 100, y: 150}; // Blue

var t = 0.75;
var randompoint = {
    x: (1 - t) * (1 - t) * startpoint.x + 2 * (1 - t) * t * controlpoint.x + t * t * endpoint.x, 
    y: (1 - t) * (1 - t) * startpoint.y + 2 * (1 - t) * t * controlpoint.y + t * t * endpoint.y
}; // Orange


context.beginPath();
context.moveTo(startpoint.x, startpoint.y);
context.quadraticCurveTo(controlpoint.x, controlpoint.y, endpoint.x, endpoint.y);
context.stroke();

这是MBo回答后的工作代码

function lerp(a, b, t)
{
    var _t = 1 - t;
    return {
        x: a.x * _t + b.x * t,
        y: a.y * _t + b.y * t
    };
}

var newpoint = lerp(controlpoint, endpoint, t);

context.beginPath();
context.moveTo(randompoint.x, randompoint.y);
context.quadraticCurveTo(newpoint.x, newpoint.y, endpoint.x, endpoint.y);
context.stroke();

Answer 1

是的，您可以通过简单的方法为这条新曲线创建新的控制点:

   P1' = P0 * (1-t) + P1 *  t

其中P0为起点，P1为旧曲线控制点，P1'为新曲线控制点

(这是一般贝塞尔曲线分割问题的特例)