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

2022-01-18 00:00:00 grid jquery javascript snapping

我要做的是在页面上创建一个等距的不可见坐标网格.然后，我希望在触发 onclick 时将 <div> 放置在最接近指针的任何网格坐标处.这是粗略的想法:

What I'm trying to do is make a grid of invisible coordinates on the page equally spaced. I then want a <div> to be placed at whatever grid coordinate is closest to the pointer when onclick is triggered. Here's the rough idea:

我已经跟踪了鼠标坐标并且 <div> 的放置效果很好.我坚持的是如何解决坐标网格的问题.

I have the tracking of the mouse coordinates and the placing of the <div> worked out fine. What I'm stuck with is how to approach the problem of the grid of coordinates.

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

First of all, should I have all my coordinates in an array which I then compare my onclick coordinate to?

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

Or seeing as my grid coordinates follow a rule, could I do something like finding out which coordinate that is a multiple of whatever my spacing is is closest to the onclick coordinate?

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

And then, where do I start with working out which grid point coordinate is closest? What's the best way of going about it?

谢谢！

推荐答案

我最初是在写一个类似于 bobince 的答案，但他比我先到了那里.我喜欢这样做的方式，但他的版本有一些楼层(尽管它仍然是一个很好的答案).

I was initially writing an answer similar to bobince's, but he got there before me. I like that way of doing it, but his version has got some floors (though it's still a very good answer).

我认为你想要的是一个没有 HTML 的网格(即没有像表格那样的标记)，bobince 提供了一个解决方案.在这种情况下，代码可能会针对跨浏览器兼容性、可读性、错误和速度进行显着优化.

I presume that what you want is a HTML-less grid (that is, without markup like a table), which bobince supplies a solution for. In that case, the code may be optimised significantly for cross browser compatibility, readability, errors and speed.

所以，我建议代码应该更像这样:

So, I suggest the code should be more like this:

#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() 函数是这两个函数的简化版本:

The mouseCoordinate() function is a boiled down version of these two functions:

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

I really like the idea of your project, perhaps I'll make something similar myself :D

相关文章