使用 javascript/jQuery 查找距离鼠标位置最近的网格坐标

Question

我想做的是在页面上等距地创建一个不可见坐标网格。然后，我希望在触发 onclick 时将

放置在最接近指针的网格坐标处。大概的想法是：

我对鼠标坐标的跟踪和

的放置效果很好。我所困扰的是如何解决坐标网格的问题。

首先，我是否应该将所有坐标放在一个数组中，然后将其与 onclick 坐标进行比较？

或者看到我的网格坐标遵循规则，我可以做一些事情，例如找出哪个坐标是无论我的间距的倍数最接近onclick坐标吗？

然后，我从哪里开始计算哪个网格点坐标最接近？最好的方法是什么？

谢谢！

Answer 1

在计算哪个网格点最接近时 - 例如，每个块都是 10x10 像素 - 要获得网格索引，您只需将它们分开 -

1. 单击 [ 237 ; 112]
2. 10x10 网格索引块
3. = [ 237/10 ; 112/10]=[23.7； 11.2 ]
4. 将它们四舍五入以获得“最接近的”
5. 块索引为 24;11

如果您需要存储数据，您可以在单击时将网格坐标推送到数组，以供稍后参考。

Answer 2

我可以做一些事情，比如找出哪个坐标是我的间距的倍数，最接近 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');
});

Answer 3

我最初写的是与鲍宾斯类似的答案，但他比我先到达那里。我喜欢这种方式，但他的版本有一些楼层（尽管它仍然是一个非常好的答案）。

我认为您想要的是一个无 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]);;
    }
};

mouseCooperative() 函数是这两个函数的简化版本：

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