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

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

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

Answer 2

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

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

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

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

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

Find control point between two points located on a quadratic curve

javascript

math

curve

canvas

quadratic