Question

I have a programming question with some math weight. I have a map with shapes(polylines) drown on it. I can take the screen coordinates of that shapes and translate them to map coordinates and reverse. I am capturing mouse position and moving around the map. How can I recognize if I come in proximity to another shape drown on the map while I am moving the mouse. I was thinking to create a radius of points around the mouse cursor, then constantly looping trough available shapes (I imagine I can load their coordinates in arrays) for a match. However that will be very slow I think. The point is that when I am in proximity (for example 15px) I will snap the muse position to that close shape. Any suggestions?

Answer 1

Now – if you really want to make it perfect – you can calculate the distance of a cursor to each line segment.

For each line segment (defined by points D and E)

Calculate line formula for segment DE in format:

Ax + By + C = 0

A = D.y – E.y

B = E.x – D.x

C = (plug in point D) = -1 * (A * D.x + B * D.y)

Now plug in your cursor position to the formula:

A * cursor.x + B * cursor.y + C = YOUR DISTANCE TO THE LINE SEGMENT

*One thing – this is distance to the unbounded line. You now want to make sure that you are between the two segment points. So make sure the angles in your cursor, D, E triangle are all < 90 degrees. A number of ways to do that, look into the dot product formula to learn a fast one.

Now if anlges are less than 90, use the distance to the line, else, use the min distance to either point of segment (D & E). Now you have a complete snap to lines functionality.