帆布和获得基于网格共同坐标（通过鼠标X鼠标Y）

我有内部10中，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'); 
}

有没有更简单的方法比做如果elses？

感谢

来源

2012-01-04 cgweb87

考虑

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

注意，它是从零开始的。

来源

2012-01-04 05:39:43 qiao

嘿，这工作真棒，我只是不得不改变它的细胞！多谢，伙计！ – cgweb87 2012-01-04 05:44:31

对于这避免了如果/别人的一个更通用的解决方案：

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

来源

2012-01-04 05:41:49 minikomi

这很好，但上面的答案非常感谢！ – cgweb87 2012-01-04 05:45:20

不幸的是，这是不可能做在JavaScript使用的“范围”的开关（AFAIK）。但是，你可以写这样的循环？

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

这将通过方块循环，并检查每一个（假设只有10个水平的）。然后你可以使用相同的逻辑来检查每个“行”的正方形，如果发现更多。希望这可以帮助！

来源

2012-01-04 05:42:45 SuperTron

帆布和获得基于网格共同坐标（通过鼠标X鼠标Y）

回答

相关问题