4
\$\begingroup\$

I'm developing a game in HTML5 and JavaScript using Canvas API for drawing graphics. I want to detect if the user has clicked on a bezier curve which has the line width of 20 pixels (something like this one on the picture). I need to validate if the user has clicked on the area drawn by the curve (red and black).

I implemented such an algorithm for lines, but could not adapt it to quadratic and cubic bezier curves. So I need an algorithm that will compare the position of a point relative to a bezier curve which has the form of

$$ B(t) = P_0 (1-t)^2 + P_1 (1-t)t + P_2t^2$$

for quadratic bezier curves or

$$ B(t) = P_0 (1-t)^3 + 3P_1 (1-t)t + 3P_2(1-t)t^2 + P_3t^3$$

for cubic bezier curves, and check if it is in the neighborhood of the bezier curve's path, I mean on the black drawn area. enter image description here

[Red: Bezier curve's path; Black: Bezier curve's drawn area]

Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

https://stackoverflow.com/questions/2742610/closest-point-on-a-cubic-bezier-curve

In particular, The last answer on the page gives this link, which I thought explained it fairly clearly:

http://jazzros.blogspot.com/2011/03/projecting-point-on-bezier-curve.html?m=1

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Thanks, sometimes it's difficult to define something what you need to search :) now, I'll need to digest a lot of math \$\endgroup\$
    – micnic
    Aug 5, 2012 at 7:30
  • \$\begingroup\$ The second link here is dead. \$\endgroup\$
    – DyingIsFun
    Dec 14, 2017 at 13:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .