帆布和獲得基於網格共同座標（通過鼠標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）

回答

相關問題