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?
Actually I want to put a div tag on this center point. Is there any equation solving involved in this process?
quadraticCurveTo draws a quadratic Bézier curve.
ReplyDeleteThe 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
where (x1, y1) is the starting point, (x2, y2) is the control point and (x3, y3) is the end point.
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)
};
}
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. ;)
EDIT: I tested the code here in a jsfiddle. http://jsfiddle.net/QA6VG/
Here's a page describing the quadratic equation and it's solution: wiki page .
ReplyDeleteAnd here is a good tutorial on the subject, complete with diagrams: tutorial