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

时间:2019-02-27 08:48:17

标签: javascript math canvas curve quadratic

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

因此,我正在考虑在随机点和终点之间找到另一个控制点,然后在原始曲线的顶部绘制另一个具有不同笔触颜色的二次曲线。

是否可以找到这样的点?还是有其他方法可以完成此任务?

Image

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

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();

2 个答案:

答案 0 :(得分:1)

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

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

其中P0是起点,P1是旧曲线的控制点,P1'是新曲线的控制点

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

答案 1 :(得分:0)

一种解决方案是在垂直于固化的方向上移动随机点和端点之间的曲线副本。要找到方向,您可以找到从随机点和终点经过的线,并找到与该线垂直的线。因此,可以在垂直方向上移动曲线的副本作为突出显示。