Snap mouse to nearest point

I have a Canvas which has a grid draw in it each line is 4px distance horizontally and vertically

what i need to do is when the mouse is over this canvas i need the mouse pointer to be moved to the closest mathematical point on the grid, this will create the effect that the mouse is snaping to the grid.

how do i acheive this pleaee
LVL 2
Robinsonx6Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

julianopolitoCommented:
you can't control the mouse from within flex/flash. The only thing you could do is hide the cursor, and show a custom cursor of yours, which can be controlled via actionscript, and snap it. Also you should add an event listener to the stage, in the capture phase, so you can stopImmediatePropagation of events, so the REAL mouse won't click out of a grd point. You can then process that click, position the custom mouse pos, and take the correct action, if the user clicks in a non grid point.
0
Robinsonx6Author Commented:
wow i like the logic do you happen to have any code references to get me started please i havnt the first idea of the math for the snapping part.

Thanks in advance
0
julianopolitoCommented:
ok, i'll write some for you soon this afternoon. let's if I can point you in the right direction.
0
10 Tips to Protect Your Business from Ransomware

Did you know that ransomware is the most widespread, destructive malware in the world today? It accounts for 39% of all security breaches, with ransomware gangsters projected to make $11.5B in profits from online extortion by 2019.

Robinsonx6Author Commented:
thanks i apppreiate it


yes i cant spell
0
julianopolitoCommented:
I'm home just now. I'll start writing it now and as soon as i finish I send you
0
julianopolitoCommented:
here is one solution. I implemented it fast, so it is not the beeest way, but it will be a good starting point for you to learn. What I did:

Created a custom cursor - a square
Hidden the mouse cursor
moved custom cursor to the nearest point based on the gaps - hgap and vgap - using modulus to calculate nearest integer
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical"
	creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			//Grid space
			private var vgap:int = 40;
			private var hgap:int = 40;
			//Visual cursor
			private var cursor:UIComponent;
			private function init():void{
				cursor = new UIComponent();
				//Draw cursor - yellow square
				with(cursor.graphics){
						lineStyle(1,0xFF0000);
						beginFill(0xFFFF00);
						drawRect(0,0,hgap,vgap);
				}
				//Listen mouse move on stage
				application.addEventListener(MouseEvent.MOUSE_MOVE,moveCursor);
				addChild(cursor);
				//hide original mouse
				Mouse.hide();
			}
			private function moveCursor(e:MouseEvent):void{
				//move custom cursor in increments of 40 -hgap and vgap
				cursor.x = e.stageX - (e.stageX%hgap);
				cursor.y = e.stageY - (e.stageY%vgap);
				//updates textinput
				ti.text = "x:"+cursor.x+" y:"+cursor.y;
				//updates screen
				e.updateAfterEvent();
			}
		]]>
	</mx:Script>
	<mx:TextInput id="ti" />
</mx:Application>

Open in new window

0
julianopolitoCommented:
Now the second version with visible gridlines.
Hope you can understand. I made the simplest way I could.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			//Grid space
			private var vgap:int = 40;
			private var hgap:int = 40;
			//Visual cursor
			private var cursor:UIComponent;
			private function init():void{
				var draw:UIComponent = new UIComponent();
				addChild(draw);
				cursor = new UIComponent();
				//Draw cursor - yellow square
				with(cursor.graphics){
						lineStyle(1,0xFF0000);
						beginFill(0xFFFF00);
						drawRect(0,0,hgap,vgap);
				}
				var sizex:Number = systemManager.stage.stageWidth;
				var sizey:Number = systemManager.stage.stageHeight;
				//Draw horizontal grid lines
				for(var i:int = 0; i < sizex; i+= hgap){
					with(draw.graphics){
						lineStyle(1,0xFFFFFF,0.4);
						moveTo(i,0);
						lineTo(i,sizey);
					}
				}
				//draw vertical grid lines
				for(i = 0; i < sizey; i+= hgap){
					with(draw.graphics){
						lineStyle(1,0xFFFFFF,0.4);
						moveTo(0,i);
						lineTo(sizex,i);
					}
				}
				//Listen mouse move on stage
				application.addEventListener(MouseEvent.MOUSE_MOVE,moveCursor);
				addChild(cursor);
				//hide original mouse
				Mouse.hide();
			}
			private function moveCursor(e:MouseEvent):void{
				//move custom cursor in increments of 40 -hgap and vgap
				cursor.x = e.stageX - (e.stageX%hgap);
				cursor.y = e.stageY - (e.stageY%vgap);
				//updates textinput
				ti.text = "x:"+cursor.x+" y:"+cursor.y;
				//updates screen
				e.updateAfterEvent();
			}
		]]>
	</mx:Script>
	<mx:TextInput id="ti"  x="283" y="24"/>
</mx:Application>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
julianopolitoCommented:
here is the file for you to try - SWF.

Changethe extension from pdf to SWF.
SnappinPoints.swf.pdf
0
Robinsonx6Author Commented:
Thanks i have to say it appars excellent but have you tested this with version 3.3 because i cant get the mouse.hide to work at all, any ideas please
0
Robinsonx6Author Commented:
sorry my mistake
0
Robinsonx6Author Commented:
Absolutely superb help, a well deservered 10 out of 10 thank you
0
julianopolitoCommented:
great!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.