Finding the closest grid coordinate to the mouse position with javascript/jQuery
could I do something like finding out which coordinate that is a multiple of whatever my spacing is is closest to the onclick coordinate?
Sure. The whole point of a grid it's it's calculable with simple arithmetic, rather than having to cart around a big array of arbitrary points.
where do I start with working out which grid point coordinate is closest?
It's a simple division with rounding for each axis.
#canvas { position: relative; width: 100px; height: 100px; border: solid red 1px; }
#nearest { position: absolute; width: 10px; height: 10px; background: yellow; }
<div id="canvas"><div id="nearest"></div></div>
var gridspacing= 10;
$('#canvas').mousemove(function(event) {
var pos= $(this).offset();
var gridx= Math.round((event.pageX-pos.left)/gridspacing);
var gridy= Math.round((event.pageY-pos.top)/gridspacing);
$('#nearest').css('left', (gridx-0.5)*gridspacing+'px').css('top', (gridy-0.5)*gridspacing+'px');
});
In terms of working out which grid point is closest - say, for example, each block is 10x10 pixels - to get the grid index you would just divide them out -
- Click at [ 237 ; 112 ]
- Blocks of 10x10
- Grid index = [ 237/10 ; 112/10 ] = [ 23.7 ; 11.2 ]
- Round them to get the "closest"
- Block indices are 24;11
If you need to store the data, you could push the grid co-ordinates to an array on click, to reference later.
I was initially writing an answer similar to bobince's, but he got there before me. I like that way of doing it, but his version has got some floors (though it's still a very good answer).
I presume that what you want is a HTML-less grid (that is, without markup like a table), which bobince supplies a solution for. In that case, the code may be optimised significantly for cross browser compatibility, readability, errors and speed.
So, I suggest the code should be more like this:
#canvas { position: relative; width: 100px; height: 100px; border: solid red 1px; }
#nearest { position: absolute; width: 10px; height: 10px; background: yellow; }
<div id="canvas"><div id="nearest"></div></div>
var
canvasOffset = $("div#canvas").offset(),
// Assuming that the space between the points is 10 pixels. Correct this if necessary.
cellSpacing = 10;
$("div#canvas").mousemove(function(event) {
event = event || window.event;
$("div#nearest").css({
top: Math.round((mouseCoordinate(event, "X") - canvasOffset.left) / cellSpacing) * cellSpacing + "px",
left: Math.round((mouseCoordinate(event, "Y") - canvasOffset.top) / cellSpacing) * cellSpacing + "px"
});
});
// Returns the one half of the current mouse coordinates relative to the browser window.
// Assumes the axis parameter to be uppercase: Either "X" or "Y".
function mouseCoordinate(event, axis) {
var property = (axis == "X") ? "scrollLeft" : "scrollTop";
if (event.pageX) {
return event["page"+axis];
} else {
return event["client"+axis] + (document.documentElement[property] ? document.documentElement[property] : document.body[property]);;
}
};
The mouseCoordinate() function is a boiled down version of these two functions:
function mouseAxisX(event) {
if (event.pageX) {
return event.pageX;
} else if (event.clientX) {
return event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
}
};
function mouseAxisY(event) {
if (event.pageY) {
return event.pageY;
} else if (event.clientY) {
return event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
};
I really like the idea of your project, perhaps I'll make something similar myself :D