二次曲线:我能确定顶点是什么吗?

quadraticCurveTo: Can I determine what the vertex will be?

本文关键字:顶点 是什么 二次 曲线      更新时间:2023-09-26

我在HTML5画布中使用了quadraticCurveTo函数。我的主要妙处是,当我只想指定顶点时,它会使用线插值。我已经知道起点和终点是什么了。据我所知,没有函数可以做到这一点,但是否有一个公式可以用来确定我的控制点?

给定二次曲线的起点,终点&中间点,你可以像这样计算它的控制点:

// Given 3 points on a Q-Curve (starting, ending & midpoint)
var p0=startPoint;
var p2=endPoint;  
var p1={
        x:2*midPoint.x-startPoint.x/2-endPoint.x/2,
        y:2*midPoint.y-startPoint.y/2-endPoint.y/2,
};

然后你可以在画布上正常绘制:

ctx.moveTo(p0.x,p0.y);
ctx.quadraticCurveTo( p1.x,p1.y, p2.x,p2.y );