画布和获取坐标基于网格(通过鼠标x鼠标y)

Canvas and getting the co ordinates based on a grid (via mouse x mouse y)

本文关键字：鼠标 网格 坐标 于网格 获取      更新时间：2023-09-26

我有一个100 x 100的画布

我有一个10 × 10的矩形，我怎么能很容易地找到鼠标在哪个矩形上，点击。

到目前为止，我可以得到这样的列，我的画布有20 x 10个矩形?

var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
var x = this.width / 5;
var y = this.height / 10;
if (mouseX - 1 < x) {
    alert('1');
} else if (mouseX - 1 < x * 2) {
    alert('2');
} else if (mouseX - 1 < x * 3) {
    alert('3');
} else if (mouseX - 1 < x * 4) {
    alert('4');
} else {
    alert('5');
}

有比其他方法更简单的方法吗?

谢谢

考虑

coordX = Math.floor(mouseX / x);
coordY = Math.floor(mouseY / y);

注意它是从零开始的。

对于避免if/else的更通用的解决方案:

var mousenow;
var unit_width = 10;
var unit_height = 10;
$("canvas").bind("mousemove", function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  var column = Math.floor(mouseX/unit_width);
  var row = Math.floor(mouseY/unit_height);
  mousenow = "Column: " + column +" Row: " + row;   
});
$("canvas").bind("click", function(e){
  e.preventDefault();
  alert(mousenow);
});

不幸的是，在javascript (AFAIK)中不可能使用"范围"开关。然而，你可以这样写一个循环?

for(var i = 1; i <= 10; i++)
    if( (mouseX < (10*i)) && (mouseX >= 10*(i-1)) )
        alert(i);

这将循环遍历正方形并检查每个正方形(假设只有10个水平的正方形)。然后，您可以使用相同的逻辑来检查每"行"正方形，如果结果是更多的话。希望这对你有帮助!

相关文章：