JavaScript - math - geometry - find zigzag line length
$30-250 USD
已完成
已发布将近 11 年前
$30-250 USD
货到付款
I have a zigzag line defined by array of [x,y] points, like:
var points = [ [50,100], [200,120], [40,200], [50,400] ];
This line is drawn on the screen as SVG path.
Later, mouse cursor is traveling on the screen near the line, and I need to be able to say at which LENGTH the mouse cursor is within the path. I may have many different zigzag lines, so I need an universal solution. I need you to write function getLengthAtPoint() in javascript.
The function will accepts three input arguments - first is the array of point coordinates, which describe the zigzag line. Second and third parameters are x and y position of the mouse cursor on the screen. The mouse cursor coordinates doesn't need to be on the line itself, in fact it may be anywhere on the screen, in that case the result will be approximate. But the nearest the cursor is to the line, the more precision I need. Your goal is to find out which point on the zigzag line is the most nearest to the mouse cursor's x-y coordinates and what is the total LENGTH of the zigzag line from the starting coordinate to the point.
You can see demo here:
[login to view URL]
As you can see, if you hover your mouse above the first part of the zigzag line, it works (it shows the red circle right under the mouse). But it doesn't work for the rest of the path. Your goal is to fix getLengthAtPoint() function so it works within the whole zigzag path.
Hello again Tomas, we worked on a previous project together I believe. I'm fairly confident I would be able to knock out this project as well for you by tonight.