打开html 中心点,html二次曲线的中心点

AKX..

18

quadraticCurveTo绘制二次Bézier曲线.

计算曲线上任意给定位置(从0到1)的点坐标的公式为

x(t) = (1-t)^2 * x1 + 2 * (1-t) * t * x2 + t^2 * x3

y(t) = (1-t)^2 * y1 + 2 * (1-t) * t * y2 + t^2 * y3

其中(x1,y1)是起始点,(x2,y2)是控制点,(x3,y3)是终点.

因此,将其转换为JavaScript,我们最终会得到类似的东西

function _getQBezierValue(t, p1, p2, p3) {

var iT = 1 - t;

return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;

}

function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {

return {

x: _getQBezierValue(position, startX, cpX, endX),

y: _getQBezierValue(position, startY, cpY, endY)

};

}

如果将开始,结束和控制点传递到getQuadraticCurvePoint那里,并且0.5对于中途位置,您应该获得具有X和Y坐标的对象.

免责声明 - 我没有测试代码,因此您的里程可能会有所不同,但似乎是正确的.;)