Question

我的画布说100 x 100

我有10,10 X 10个矩形，我怎样才能轻松找到鼠标所在的矩形，onclick。

到目前为止，我可以得到这样的列，我的画布有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更容易的方法？

由于

Answer 1

考虑

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

请注意，它基于零。

Answer 2

对于避免if / elses的更通用的解决方案：

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

Answer 3

不幸的是，在javascript（AFAIK）中使用“范围”开关是不可能的。但是，您可以编写一个这样的循环吗？

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

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

画布并根据网格获取坐标（通过鼠标x鼠标y）

3 个答案: