Нахождение самой близкой декартовой координаты к положению мыши с javascript/jQuery
То, что я пытаюсь сделать, делают сетку невидимых координат на странице равномерно распределенной. Я затем хочу a У меня есть отслеживание координат мыши и размещение В первую очередь, у меня должны быть все свои координаты в массиве, с которым я затем сравниваю свою координату onclick? Или наблюдение, поскольку мои декартовы координаты следуют правилу, я мог сделать что-то как обнаружение, которые координируют, который является кратным тому, что мой интервал, является самым близким к координате onclick? И затем, где я запускаю с разработки, какая координата узла решетки является самой близкой? Каков лучший способ идти об этом? Спасибо!
3 ответа
Сначала я писал ответ, похожий на ответ Бобинса, но он попал туда раньше меня. Мне нравится такой способ, но в его версии есть несколько этажей (хотя это все еще очень хороший ответ).
Я предполагаю, что вам нужна сетка без HTML (то есть без разметки, такой как таблица), для которой bobince предлагает решение. В этом случае код может быть значительно оптимизирован для кроссбраузерной совместимости, удобочитаемости, ошибок и скорости.
Итак, я предлагаю, чтобы код был примерно таким:
#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]);;
}
};
Функция mouseCoordinate () - это упрощенная версия этих двух функций:
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);
}
};
Мне очень нравится идея вашего проекта, возможно, я сделаю что-то похожее я: D
С точки зрения определения ближайшей точки сетки - скажем, для Например, каждый блок имеет размер 10x10 пикселей - чтобы получить индекс сетки, вы должны просто разделить их -
- Щелкните по [237; 112]
- Блоки по 10x10
- Индекс сетки = [237/10; 112/10] = [23,7; 11.2]
- Округлите их, чтобы получить «ближайший»
- Индексы блоков равны 24; 11
Если вам нужно сохранить данные, вы можете нажать координаты сетки в массив при щелчке мышью, чтобы ссылаться на них позже. .
могу ли я сделать что-то вроде определения координаты, кратной расстоянию между точками, которая ближе всего к координате нажатия?
Конечно. Весь смысл сетки в том, что ее можно вычислить с помощью простой арифметики, а не таскать за собой большой массив произвольных точек.
С чего мне начать, чтобы определить, какая координата точки сетки ближе всего?
Это простое деление с округлением для каждой оси.
#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');
});