使用javascript/jQuery查找與鼠標位置最接近的網格座標

Question

我想要做的是在頁面上等間隔地創建一個不可見的座標網格。然後我想要一個<div>被放置在觸發onclick時任​​何最接近指針的網格座標上。下面是粗略的想法：

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

我有鼠標座標的跟蹤和<div>的擺放制定了罰款。我堅持的是如何處理座標網格的問題。

首先，我是否應該將所有座標都放在一個數組中，然後將我的onclick座標與？

，或看到我的網格座標遵循一個規則，我可以做類似找出哪些座標是多不管我間距是最接近的onclick協調？

然後，我從哪裏開始計算出哪個網格點座標最接近？什麼是最好的方式去做呢？

謝謝！

Answer 1

我最初正在寫一個類似於bobince的答案，但他在我之前到達了那裏。我喜歡這樣做，但他的版本已經有了一些層次（儘管它仍然是一個非常好的答案）。

我認爲你想要的是一個無HTML的網格（也就是沒有像表格那樣的標記），該網格提供了一個解決方案。在這種情況下，代碼可能會因爲跨瀏覽器兼容性，可讀性，錯誤和速度而顯着優化。

所以，我建議代碼應該更多這樣的：

#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

Answer 2

在找出哪些網格點最接近的方面 - 比如，例如，每個塊是10×10像素 - 獲得網格索引你只劃分出來 -

1. 單擊[237; 112]
2. 10x10塊
3. 網格索引= [237/10; 112/10] = [23.7; 11.2]
4. 回合他們獲得了「最接近」
5. 座指數是24; 11

如果你需要存儲的數據，你可能會推動網格座標到陣列上點擊，稍後參考。

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