Encontrar la coordenada de cuadrícula más cercana a la posición del mouse con javascript/jQuery

Question

Lo que trato de hacer es crear una cuadrícula de coordenadas invisibles en la página igualmente espaciadas. Luego quiero que se coloque un <div> en cualquier coordenada de cuadrícula que esté más cerca del puntero cuando se active onclick. Aquí está la idea aproximada:

alt text http://i43.tinypic.com/x2uq84.jpg

tengo el seguimiento de las coordenadas del ratón y la colocación de la <div> funcionó bien. A lo que me tengo que enfrentar es a cómo abordar el problema de la grilla de coordenadas.

Antes que nada, ¿debería tener todas mis coordenadas en una matriz a la cual comparo mis coordenadas onclick?

o ver como mi coordenadas de la cuadrícula seguir una regla, podía hacer algo así como averiguar qué coordenada que es un múltiplo de lo que mi separación se está más cerca del onclick de coordenadas?

Y entonces, ¿dónde empiezo a calcular qué coordenadas del punto de la cuadrícula están más cerca? ¿Cuál es la mejor manera de hacerlo?

Gracias!

Answer 1

Al principio estaba escribiendo una respuesta similar a la de bobince, pero llegó antes que yo. Me gusta esa forma de hacerlo, pero su versión tiene algunos pisos (aunque sigue siendo una muy buena respuesta).

Supongo que lo que quiere es una cuadrícula sin HTML (es decir, sin marcado como una tabla), para lo que bobince proporciona una solución. En ese caso, el código puede optimizarse significativamente para compatibilidad, legibilidad, errores y velocidad entre navegadores.

Por lo tanto, sugieren que el código debe ser de la misma familia:

#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]);; 
    } 
}; 

La función mouseCoordinate() es una versión reducía de estas dos funciones:

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); 
    } 
}; 

me gusta mucho la idea de su proyecto, quizás haré algo similar yo mismo: D

Answer 2

en términos de trabajar qué punto de la cuadrícula está más cerca - digamos, por ejemplo, cada bloque es de 10x10 píxeles - para obtener el índice de cuadrícula usted acaba de dividir a cabo -

1. Haga clic en [237; 112]
2. Bloques de 10x10
3. Índice de cuadrícula = [237/10; 112/10] = [23.7; 11.2]
4. Ronda de ellos para obtener los
5. índices de bloque "más cercanos" son 24; 11

Si necesita almacenar los datos, se puede empujar la cuadrícula de coordenadas de una gran variedad de clic, para referencia posterior

Answer 3

, haría yo algo así como averiguar qué coordenada que es un múltiplo de lo que mi separación es más cercana a la onclick de coordenadas?

Sure. El punto total de una grilla es su cálculo con aritmética simple, en lugar de tener que recorrer una gran variedad de puntos arbitrarios.

¿Por dónde empiezo a calcular qué coordenada de punto de rejilla es la más cercana?

Es una división simple con redondeo para cada eje.

#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'); 
});