html二次曲线的中心点 [英] Center point on html quadratic curve

问题描述

我在html画布上使用 context.quadraticCurveTo（controlX，controlY，endX，endY）绘制了二次曲线; 。

I have a quadratic curve drawn on html canvas using context.quadraticCurveTo(controlX, controlY, endX, endY); .

我有控制点以及起点和终点，它们不一定是水平相同的。

I have the control-point and the starting and end points, which are not necessarily level with each other horizontally.

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

How can I find the centre point on the curve using these parameters?

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

Actually I want to put a div tag on this center point. Is there any equation solving involved in this process?

推荐答案

quadraticCurveTo 绘制二次贝塞尔曲线。

计算曲线上任意给定位置（从0到1）的点坐标的公式是

The formulas to calculate the coordinates of a point at any given position (from 0 to 1) on the curve are

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）是终点。

where (x1, y1) is the starting point, (x2, y2) is the control point and (x3, y3) is the end point.

所以，把它变成JavaScript，我们最终会得到像

So, turning that into JavaScript, we end up with something like

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坐标的物体。

If you pass the start, end and control points to getQuadraticCurvePoint there, along with 0.5 for the halfway position, you should get an object with the X and Y coordinates.

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

Disclaimer -- I didn't test the code, so your mileage may vary, but it seems right. ;)

编辑：我在jsfiddle中测试了这里的代码。 http://jsfiddle.net/QA6VG/206/

I tested the code here in a jsfiddle. http://jsfiddle.net/QA6VG/206/

这篇关于html二次曲线的中心点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！