Нахождение координаты ближайшей сетки к положению мыши с помощью javascript / jQuery - PullRequest
Новая
       74

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

11 голосов
/ 26 апреля 2010

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

альтернативный текст http://i43.tinypic.com/x2uq84.jpg

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

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

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

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

Спасибо!

Ответы [ 3 ]

7 голосов
/ 26 апреля 2010

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

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

с чего начать с определения, какая координата точки сетки является ближайшей?

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

#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');
});
7 голосов
/ 26 апреля 2010

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

  1. Нажмите на [237; 112]
  2. Блоки 10х10
  3. Индекс сетки = [237/10; 112/10] = [23,7; 11,2]
  4. Округлите их, чтобы получить "ближайший"
  5. Индексы блоков 24; 11

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

4 голосов
/ 26 апреля 2010

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

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

...