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

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'是新曲线的控制点

（这是一般贝塞尔曲线细分问题的特殊情况）

Answer 2

解决方案是在垂直于固化的方向上移动随机点和端点之间的曲线的副本。要找到方向，您可以找到从随机点和端点传递的线，并找到该线的垂直线。因此，将曲线的副本在垂直方向上移动为荧光笔。