How do I detect proximity of the mouse pointer to a line in Flex?
Posted
by Hanno Fietz
on Stack Overflow
See other posts from Stack Overflow
or by Hanno Fietz
Published on 2010-04-23T14:23:03Z
Indexed on
2010/04/23
14:23 UTC
Read the original article
Hit count: 250
I'm working on a charting UI in Flex. One of the features I want to implement is "snapping" of the mousepointer to the data points in the diagram. I. e., if the user hovers the mouse pointer over a line diagram and gets close to the data point, I want the pointer to move to the exact coordinates and show a marker, like this:
Currently, the lines are drawn on a Shape
, using the Graphics
API. The Shape is a child DisplayObject of a custom UIComponent
subclass with the exact same dimensions. This means, I already get mouseOver
events on the parent of the diagram's canvas.
Now I need a way to detect if the pointer is close to one of the data points. I. e. I need an answer to the question "Which data points lie within a radius of x pixels from my current position and which of them is closest?" upon each move of the mouse. I can think of the following possibilities:
- draw the lines not as simple lines in the graphics API, but as more advanced objects that can have their own
mouseOver
events. However, I want the snapping to trigger before the mouse is actually over the line. - check the original data for possible candidates upon each mouse movement. Using binary search, I might be able to reduce the number of items I have to compare sufficently.
- prepare some kind of new data structure from the raw data that makes the above search more efficient. I don't know how that would look like.
I'm guessing this is a pretty standard problem for a number of applications, but probably the actual code usually is inside of some framework. Is there anything I can read about this topic?
© Stack Overflow or respective owner