Changing values as mouse moves..

[EchoFool]

Hey

 

 

I am trying to create a scrolling affect with my mouse where by the user left clicks and drags to "scroll" the canvas.

 

 

But i am having difficulty applying it.

 

 

This is currently what i have done:

 

function mouseCheck(e){
	var x = e.pageX;
	var y = e.pageY;
	ymouse=(2*(y-canvas.offsetTop-tilesh)-x+canvas.offsetLeft+tilesw)/2;
	xmouse=x+ymouse-tilesw-25-canvas.offsetLeft
		ymouse=Math.round(ymouse/32)/2;
	xmouse=Math.round(xmouse/64);

	document.title = "tileY:" + ymouse + " | tileX:" + xmouse; //display grid position
}



function init(){  //this executes on load of page
var canvas = document.getElementById("canvas");  
canvas.addEventListener("mousemove", mouseCheck, false);


var ctx = canvas.getContext("2d"); 
ctx.canvas.width  = canvas.width;
ctx.canvas.height = canvas.height;


var offset_x; //view position x
var offset_y; //view position y

 

 

The two issues i have is:

1) How do i add a "on left click" but also where the mouse button is still pressed?

2) I need to calculate how far the mouse has moved in x or y direction and assign it to offset_x and offset_y

 

Any one have any idea ? =/

[scootstah]

Essentially, you would need to have a mousedown event, and then a mousemove event. When you fire the mousedown event, you save the mouse coordinates. You can then compare these coordinates to the new coordinates while dragging.

[EchoFool]

Thanks i have it working now