Tìm tọa độ lưới gần nhất với vị trí chuột bằng javascript/jQuery

Question

Điều tôi đang cố gắng thực hiện là tạo một mạng lưới các tọa độ vô hình trên trang được đặt cách nhau bằng nhau. Sau đó tôi muốn một <div> được đặt ở bất kỳ tọa độ lưới nào gần nhất với con trỏ khi onclick được kích hoạt. Dưới đây là những ý tưởng thô:

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

Tôi có theo dõi tọa độ chuột và đặt của <div> làm việc ra tốt đẹp. Những gì tôi đang mắc kẹt là làm thế nào để tiếp cận vấn đề của lưới tọa độ.

Trước hết, tôi có nên có tất cả tọa độ của mình trong một mảng mà sau đó tôi so sánh tọa độ onclick của tôi với không?

Hoặc xem như tọa độ lưới của tôi tuân theo quy tắc, tôi có thể làm điều gì đó như tìm ra tọa độ nào là bội số của bất kỳ khoảng cách nào của tôi là gần tọa độ nhất trên không?

Và sau đó, tôi bắt đầu làm việc với phối hợp điểm lưới nào gần nhất? Cách tốt nhất để đi về nó là gì?

Cảm ơn!

Answer 1

Tôi đã viết một câu trả lời tương tự như của bobince, nhưng anh ấy đã đến đó trước tôi. Tôi thích cách đó, nhưng phiên bản của anh ấy có một số tầng (mặc dù nó vẫn là một câu trả lời rất hay).

Tôi đoán rằng những gì bạn muốn là một lưới HTML ít hơn (có nghĩa là, không có đánh dấu như một bảng), mà bobince cung cấp một giải pháp cho. Trong trường hợp đó, mã có thể được tối ưu hóa đáng kể cho khả năng tương thích trình duyệt chéo, khả năng đọc, lỗi và tốc độ.

Vì vậy, tôi đề nghị các mã nên được nhiều như thế này:

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

Các mouseCoordinate() chức năng là một phiên bản luộc xuống hai chức năng:

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

Tôi thực sự thích ý tưởng của dự án của bạn, có lẽ tôi sẽ làm một cái gì đó tương tự bản thân mình: D

Answer 2

Xét về làm việc ra mà điểm lưới gần nhất - chẳng hạn, ví dụ, mỗi khối là pixel 10x10 - để có được chỉ số lưới bạn sẽ chỉ chia chúng ra -

1. Click vào [237; 112]
2. Khối 10x10
3. Chỉ số lưới = [237/10; 112/10] = [23,7; 11,2]
4. Vòng họ để có được "gần gũi"
5. Khối chỉ số là 24; 11

Nếu bạn cần lưu trữ dữ liệu, bạn có thể đẩy lưới tọa độ để một mảng trên nhấp chuột, để tham khảo sau.

Answer 3

Tôi có thể làm điều gì đó giống như tìm ra tọa độ nào là bội số của khoảng trắng của tôi gần nhất với tọa độ onclick không?

Chắc chắn. Toàn bộ điểm của lưới điện, nó có thể tính toán bằng số học đơn giản, thay vì phải xếp hàng xung quanh một mảng lớn các điểm tùy ý.

tôi bắt đầu làm việc với tọa độ điểm lưới nào gần nhất?

Đó là bộ phận đơn giản với làm tròn cho mỗi trục.

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