CODEWITHSUNDEEP
coordinateshtml5-canvaskineticjscurve
mreq
mreq

Reputation: 6542

HTML5 Canvas: get curve's coordinates

I have a quadratic curve in canvas (defined by start, end and control point). What I need is to get more of the curve's coordinates (eg. the middle, quarters etc.). With that, I'd be able (after a few iterations of finding coordinates) to animate an object based on this curve (I know it can be done easily with SVG, but that's not an option).

enter image description here

image taken from http://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/

Is there an easy way to do this? When I checked for bisecting curve on google, the only thing I found was some complicated Math including drawing, which is out of the question.

Upvotes: 2

Views: 560

Answers (2)

jfollas
jfollas

Reputation: 1235

These functions may be of interest to you:

Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y)
Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y)

Upvotes: 2

tim-montague
tim-montague

Reputation: 17372

I am seeking a similar solution for bezier curves. How do I get a list of the coordinates on the curve?

To solve your problem, perhaps you could plugin the x-coordinate (or y-coordinate) into the quadratic equation:

y = a*x^2 + b*x + c

I can't seem to find a function that returns the coordinates of the curve. It would be nice to get a list of the coordinates for any curve / shape.

Upvotes: 0

Related Questions