html二次曲线的中心点

Question

我有一个在html画布上绘制的二次曲线context.quadraticCurveTo(controlX, controlY, endX, endY);.

我有控制点以及起点和终点,它们不一定是水平相互平齐的.

如何使用这些参数找到曲线上的中心点？

其实我想在这个中心点放一个div标签.这个过程中是否有任何方程式求解？

Answer 1

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坐标的对象.

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

编辑:我在这里用jsfiddle测试了代码.http://jsfiddle.net/QA6VG/206/