Поиск ближайшей координаты сетки в позиции мыши с помощью javascript/jQuery

То, что я пытаюсь сделать, это сделать сетку невидимых координат на странице с одинаковым интервалом. Затем я хочу, чтобы элемент <div> помещался в любую координату сетки, ближайшую к указателю при срабатывании onclick. Вот грубая идея:

У меня отслеживание координат мыши и размещение <div> прошло нормально. Я застрял в том, как подойти к проблеме сетки координат.

Прежде всего, я должен иметь все свои координаты в массиве, с которым я затем сравниваю свою координату onclick?

Или, видя, как мои координаты сетки следуют правилу, могу ли я сделать что-то вроде выяснения, какая координата, кратная тому, что мой интервал, ближе всего к координате onclick?

И затем, с чего начать с определения, какая координата точки сетки является ближайшей? Какой лучший способ это сделать?

Спасибо!

Ответ 1

Я изначально писал ответ, похожий на бобинс, но он добрался до меня. Мне нравится этот способ сделать это, но его версия имеет несколько этажей (хотя это еще очень хороший ответ).

Я предполагаю, что вам нужна сетка без 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

Ответ 2

С точки зрения разработки, какая точка сетки ближе всего - скажем, например, каждый блок имеет 10x10 пикселей - чтобы получить индекс сетки, вы просто разделите их -

Нажмите [237; 112]
Блоки 10x10
Сетка индекс = [237/10; 112/10] = [23,7; 11.2]
Завершите их, чтобы получить "самый близкий"
Индексы блоков равны 24; 11

Если вам нужно сохранить данные, вы можете нажать координаты сетки на массив по щелчку, чтобы ссылаться позже.

Ответ 3

Могу ли я сделать что-то вроде определения, какая координата кратно тому, что мой интервал близок к координате onclick?

Конечно. Вся точка сетки, которую он вычисляет с простой арифметикой, вместо того, чтобы иметь корзину вокруг большого массива произвольных точек.

где я начинаю с разработки, какая координата точки сетки ближе всего?

Это простое разделение с округлением для каждой оси.

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