如何在我的网格上记录 X、Y 鼠标位置？答案

【问题标题】：How could a log X, Y mouse position on my grid?如何在我的网格上记录 X、Y 鼠标位置？
【发布时间】：2014-10-31 22:44:40
【问题描述】：

我有这个脚本来创建矩形网格，我将如何记录鼠标位置的地图坐标，所以如果鼠标在 1,1 上它会记录 1,1？：

+---+---+---+---+
|0,0|0,1|0,2|0,3|
+---+---+---+---+
|1,0|1,1|1,2|1,3|
+---+---+---+---+
|2,0|2,1|2,2|2,3|
+---+---+---+---+
|3,0|3,1|3,2|3,3|
+---+---+---+---+

这是我必须创建网格的脚本；

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = (32 * 12);
canvas.height = (32 * 12);
document.body.appendChild(canvas);

var posX = 0;
var posY = 0;
var tileSize = 32;

$(document).ready(function(){
    drawGrid();
});

function drawGrid(){
    for(var x = 0; x < 12; x++){
        for(var y = 0; y < 12; y++){
            ctx.rect(posX, posY, tileSize, tileSize);
            ctx.stroke();
            posX += tileSize;
        }
       posY += tileSize;
       posX = 0;
   }
}

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

只需根据图块大小量化鼠标位置即可，例如（假设您已经获得了鼠标位置）：

var gridX = (mouseX / tileSize)|0;
var gridY = (mouseY / tileSize)|0;

现在您可以将gridX 和gridY 记录为原始网格定义。

【讨论】：

【解决方案2】：

在鼠标移动时获取鼠标的 x 和 y 位置并将它们除以 tileSize。

Fiddle 上的演示

canvas.onmousemove = function(e) {
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  document.getElementsByTagName('div')[0].innerHTML = '(' + Math.floor(mouseX / tileSize) + ', ' + Math.floor(mouseY / tileSize) + ')';
}

【讨论】：