用javascript / jQuery查找与鼠标位置最近的网格坐标 [英] Finding the closest grid coordinate to the mouse position with javascript/jQuery

问题描述

我想要做的是在页面上等间隔地创建一个不可见的坐标网格。然后，我想要在触发onclick时将< div> 放置在与指针最接近的任何网格坐标上。以下是大概的想法：

alt text http：//i43.tinypic。 com / x2uq84.jpg

我跟踪鼠标坐标并放置< div> 工作得很好。我坚持的是如何处理坐标网格的问题。

首先，我应该把所有的坐标都放在一个数组中，然后比较我的onclick坐标到？

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

然后，我从哪里开始计算出哪个网格点坐标最接近？什么是最好的方式去解决它？

谢谢！

解决方案

我最初正在写一个类似于bobince的答案，但他在我之前到达了那里。我喜欢这样做，但他的版本已经有了一些层次（尽管它仍然是一个非常好的答案）。

我认为你想要的是一个HTML-更少的网格（也就是说，没有像表格那样的标记），该网格提供了一个解决方案。在这种情况下，代码可能会因为跨浏览器兼容性，可读性，错误和速度而显着优化。所以，我建议代码应该更像这样：

p>

  #canvas {position：relative;宽度：100px; height：100px;边框：纯红色1px; } 
 #nearest {position：absolute;宽度：10px; height：10px;背景：黄色; } 
 
< div id =canvas>< div id =nearest>< / div>< / div> 
 
 var 
 canvasOffset = $（div＃canvas）。offset（），
 //假设点之间的间距为10像素。如有必要请更正此问题。 
 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（事件，Y） -  canvasOffset.top）/ cellSpacing）* cellSpacing +px
}）; 
}）; 
 
 //返回当前鼠标相对于浏览器窗口的一半。 
 //假设轴参数为大写：X或Y。 
函数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（）函数是这两个函数的简化版本：

 函数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

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:

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

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.

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

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?

Thanks!

解决方案

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).

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

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

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

这篇关于用javascript / jQuery查找与鼠标位置最近的网格坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！