如何将一个物体放置在画布网格内部。

Question

这是我静态网格的代码。现在我想通过点击任何一个单元格来动态地将对象放置在其中一个单元格中。我该如何实现这个功能？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for (var x = 0; x <= 400; x += 80)  // Vertical lines in the canvas
{
    ctx.moveTo(x, 0);
    ctx.lineTo(x, 400);
    ctx.stroke();
}

for (var y=0 ; y<=400 ; y +=80) // Horizontal lines in the canvas
{
    ctx.moveTo(0, y);
    ctx.lineTo(400, y);
    ctx.stroke();
}

- jasmin

Answer 1

让我们分阶段构建这个。首先，我们需要一个函数来获取鼠标相对于画布（或任何其他元素）的位置：

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

还有一个函数，用于将这些坐标转换为您绘制的棋盘上单元格的索引：

function cell(x, y) {
    return Math.floor(x / CELL_SIZE) + (ROWS * Math.floor(y / CELL_SIZE));
}

还有一个函数，用于在画布上放置一个对象，位置由cell给出（这使用一个小圆）：

function put(cell) {
    var x = CELL_SIZE * (cell % ROWS);
    var y = CELL_SIZE * Math.floor(cell / ROWS);
    ctx.beginPath();
    ctx.arc(x + (CELL_SIZE / 2), y + (CELL_SIZE / 2), 5, 0, 2 * Math.PI);
    ctx.stroke();
}

现在让我们来使用那些东西：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var CELL_SIZE = 80;
var ROWS = 5;

c.addEventListener("click", function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    put(cell(x, y));
});

function createBoard() {
    for (var x = 0; x <= 400; x += CELL_SIZE)  {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, 400);
        ctx.stroke();
    }
    for (var y = 0; y <= 400; y += CELL_SIZE) {
        ctx.moveTo(0,y);
        ctx.lineTo(400,y);
        ctx.stroke();
    }
}

createBoard();

在JSFIDDLE上查看完整的工作示例。

• http://jsfiddle.net/2n6H5/

- Wayne