>

내가하려고하는 것은 페이지에 보이지 않는 좌표 격자를 동일한 간격으로 만드는 것입니다. 나는 <div> 를 원한다  onclick이 트리거 될 때 포인터에 가장 가까운 그리드 좌표에 배치됩니다. 대략적인 아이디어는 다음과 같습니다.

마우스 좌표를 추적하고 <div> 를 배치했습니다  잘 작동했습니다. 내가 고착하고있는 것은 좌표 격자의 문제에 접근하는 방법입니다.

먼저 배열에 모든 좌표가 있어야하고 클릭 좌표를 비교해야합니까?

그리드 좌표가 규칙을 따르는 경우간격이 무엇이든의 배수 인 좌표가 온 클릭 좌표와 가장 가까운 것을 찾는 것과 같은 작업을 수행 할 수 있습니까?

그러면 어느 그리드 포인트 좌표가 가장 가까운 곳에서 운동을 시작합니까? 가장 좋은 방법은 무엇입니까?

감사합니다!

  • 답변 # 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

  • 답변 # 2

    가장 가까운 그리드 포인트를 계산하는 관점에서, 예를 들어 각 블록은 10x10입니다. 픽셀-그리드 인덱스를 얻으려면 분할하면됩니다-

    <올>

    [237;112]

    10x10의 블록

    그리드 인덱스 = [237/10;112/10] = [23.7;11.2]

    "가장 가까운"것을 얻기 위해 반올림

    블록 인덱스는 24;11입니다

    데이터를 저장해야하는 경우 나중에 참조하기 위해 클릭시 그리드 좌표를 배열로 푸시 할 수 있습니다.

  • 답변 # 3

    could I do something like finding out which coordinate that is a multiple of whatever my spacing is is closest to the onclick coordinate?

    물론. 그리드의 전체 점은 임의의 큰 점을 중심으로 카트를 타지 않고 간단한 산술로 계산할 수 있습니다.

    와이즈 비즈

    각 축마다 반올림되는 간단한 나누기입니다.

    where do I start with working out which grid point coordinate is closest?

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

  • 이전 regex - Java에서 유효한 문자를 확인하기위한 정규식
  • 다음 python - 사전 키 문자열