CODEWITHSUNDEEP
javascriptsvgpathgeometry
Axeman
Axeman

Reputation: 174

Check if a point is near a path, and get Y value of a path for a given X

I have a javascript class that uses an SVG to draw a set of cartesian graphs using paths (with both line and curve segments)

Now, the code must intercept a click event on the graph area, and if the click is on - or near - one of the path, it must take the X value, and get the Y values of other paths on the graph.

Click ON the graph area is not a problem with native events, but detecting click NEAR the graph and get all the Y values is a thing that I don't know how to do, because I'm searching for a method using the native JS function and methond, if available.

Yes, I can render every curve in a 2d array and do a lookup, but I'm trying to avoid it. Is there a way to do it without "reverting" to the math approach?

Upvotes: 0

Views: 463

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

Draw the same curve with a stroke and stroke-width (to make it wider) but make it visibility="hidden" and then use the pointer-events property to make the hidden stroked curve clickable. You can either put the hidden curve on top or underneath the original stroke but if you put it underneath you'll probably want to make the original curve pointer-events="none"

Upvotes: 2

Related Questions