javascript/jQuery를 사용하여 마우스 위치에 가장 가까운 격자 좌표 찾기

Question

내가하려는 것은 화면에 보이지 않는 좌표 격자를 동일 간격으로 배치하는 것입니다. 그런 다음 <div>을 onclick이 트리거 될 때 포인터에 가장 가까운 격자 좌표에 배치하려고합니다.

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

는 내가 가진 마우스 좌표의 추적과 <div>의 배치가 잘 밖으로 일 : 여기에 거친 생각입니다. 내가 갇혀있는 것은 좌표계의 문제에 접근하는 방법입니다.

우선, 내 좌표를 배열에서 모두 가지고 있어야 내 onclick 좌표를 비교해야합니까?

내 눈금 좌표가 규칙을 따르는 것을 볼 수 있는데, 내 좌표가 인 좌표가 인 배수를 찾는 것과 같은 작업을 수행 할 수 있습니까?

그런 다음 어느 격자 점 좌표가 가장 가까운 좌표부터 시작해야합니까? 그것에 대해가는 가장 좋은 방법은 무엇입니까?

감사합니다. 격자 점은 가장 가까운하는 운동의 측면에서

Answer 1

나는 처음에는 보빈스와 비슷한 대답을 쓰고 있었지만, 그는 내 앞에 거기에갔습니다. 나는 그 일을하는 방식을 좋아하지만, 그의 버전은 약간의지면을 가지고있다. (여전히 아주 좋은 대답이다.)

내가 원하는 것은 보빈이 솔루션을 제공하는 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'); 
});