Canvas и получение координат на основе сетки (с помощью мыши x mouse y)

Question

У меня есть холст, скажем, 100 х 100

И у меня внутри 10, 10 х 10 прямоугольников, как я могу легко найти, на каком прямоугольнике находится мышь, щелкнув мышью.

До сих пор я мог получить столбец примерно так, мой холст имеет 20 х 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');
}

Есть ли более простой способ, чем сделать, если нет?

Спасибо

Answer 1

1001 * рассмотреть *

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 горизонтальных).Затем вы можете использовать ту же логику для проверки каждой «строки» квадратов, если их окажется больше.Надеюсь, это поможет!