画布拼图项目的 getImageData 和 putImageData

Question

我有以下代码用于处理我的画布：

function clickBox() //Get every cell by coordinate on the grid.
{
    var xRectFill = 0; //We start our search on the left side of the board.
    var yRectFill = 0; //We start our search at the top of the board.
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here.
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here.
    var mouseX = event.offsetX;
    var mouseY = event.offsetY;
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here.
    {
        rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8]
        rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8]
        xRectFill += 72; //After we fill an X value, we will use the value of the next cell.
        yRectFill += 72; //After we fill a Y value, we will use the value of the next cell.
    }
    for (i4 = 0; i4 <= 8; i4++)
    {
        if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
        {
            for (i5 = 0; i5 <= 8; i5++)
            {
                if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
                {
                    ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
                }
            }
        }
    }
}

我正在通过设计数独游戏来练习画布。我有一个 9 x 9 的网格，函数“clickBox”当前获取鼠标的坐标并清除一个单元格。当从鼠标单击事件调用时，此函数中的所有内容都按预期工作。

我现在想做的是复制被 clearRect 清除的画布部分，并在我单击另一个区域时将该副本放回画布中。

我尝试了几种不同的方法并进行了一些修改。我想我需要使用画布函数 getImageData 和 putImageData，但未能成功。

我尝试在清除框的那一刻存储我的 X 和 Y 坐标，然后将这些坐标传递给 getImageData，然后在发生新点击时将 putImageData 放入。我不确定我是否做对了，get/put 似乎从来没有做任何事情。

我的理论是在 clearRect 函数发生之前使用 getImageData，然后在下一次点击时，在之前点击的单元格上使用 putImageData。

谁能告诉我在这个项目中正确使用 getImageData 和 putImageData 吗？

这是我尝试解决的问题：

function clickBox() //Get every cell by coordinate on the grid.
{
    var xRectFill = 0; //We start our search on the left side of the board.
    var yRectFill = 0; //We start our search at the top of the board.
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here.
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here.
    var mouseX = event.offsetX;
    var mouseY = event.offsetY;

    if (lastLocation[0] != null)
    {
        ctx.putImageData(imgData, lastLocation[0], lastLocation[1], 70);
    }
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here.
    {
        rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8]
        rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8]
        xRectFill += 72; //After we fill an X value, we will use the value of the next cell.
        yRectFill += 72; //After we fill a Y value, we will use the value of the next cell.
    }
    for (i4 = 0; i4 <= 8; i4++)
    {
        if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
        {
            for (i5 = 0; i5 <= 8; i5++)
            {
                if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
                {
                    var imgData = ctx.getImageData(rectFillArrayX[i4], rectFillArrayY[i4], 72, 72);
                    var lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]];
                    ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
                }
            }
        }
    }
}

我也试过了：

function clickBox() //Get every cell by coordinate on the grid.
{
    var xRectFill = 0; //We start our search on the left side of the board.
    var yRectFill = 0; //We start our search at the top of the board.
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here.
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here.
    var mouseX = event.offsetX;
    var mouseY = event.offsetY;
    var lastLocation = [];

    if (typeof lastLocation[0] !== 'undefined')
    {
        alert("Array is defined");
        ctx.putImageData(imgData, lastLocation[0], lastLocation[1], 70);
    }
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here.
    {
        rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8]
        rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8]
        xRectFill += 72; //After we fill an X value, we will use the value of the next cell.
        yRectFill += 72; //After we fill a Y value, we will use the value of the next cell.
    }
    for (i4 = 0; i4 <= 8; i4++)
    {
        if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
        {
            for (i5 = 0; i5 <= 8; i5++)
            {
                if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
                {
                    var imgData = ctx.getImageData(rectFillArrayX[i4], rectFillArrayY[i4], 72, 72);
                    var lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]];
                    ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
                }
            }
        }
    }
}

Puzzle

Answer 1

我终于修好了。

function clickBox() //Get every cell by coordinate on the grid.
{
    var xRectFill = 0; //We start our search on the left side of the board.
    var yRectFill = 0; //We start our search at the top of the board.
    var rectFillArrayX = []; //We will store every X-Coordinate of a cell here.
    var rectFillArrayY = []; //We will store every Y-Coordinate of a cell here.
    var mouseX = event.offsetX;
    var mouseY = event.offsetY;
    if (typeof lastLocation !== 'undefined' && lastLocation.length > 0)
    {
        // the array is defined and has at least one element
        ctx.putImageData(imgData, lastLocation[0], lastLocation[1]);
    }
    for (i3 = 0; i3 <= 8; i3++) //We will fill the X and Y values of our storage array here.
    {
        rectFillArrayX[i3] = xRectFill; //We will get each individual X-Coordinate and store from [0-8]
        rectFillArrayY[i3] = yRectFill; //We will get each individual Y-Coordinate and store from [0-8]
        xRectFill += 72; //After we fill an X value, we will use the value of the next cell.
        yRectFill += 72; //After we fill a Y value, we will use the value of the next cell.
    }
    for (i4 = 0; i4 <= 8; i4++)
    {
        if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
        {
            for (i5 = 0; i5 <= 8; i5++)
            {
                if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
                {
                    lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]];
                    ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
                }
            }
        }
    }
}

我在别处创建了一个全局 getImageData 变量，并在函数开头附近添加了一个检查以查看是否创建了数组，而不是事先创建一个空数组。

最后补充：

if (typeof lastLocation !== 'undefined' && lastLocation.length > 0)
        {
            // the array is defined and has at least one element
            ctx.putImageData(imgData, lastLocation[0], lastLocation[1]);
        }

Answer 2

在我看来，您需要创建一个将这些部分作为表格单元格的表格。然后，您可以轻松地隐藏和取消隐藏事件或其他内容的单元格。

你可以设置<tr id="your_cell" style="display: none;">，然后用JavaScript显示回来：

var cell_with_data = document.getElementById('your_cell').style;
cell_with_data.display = 'table-row'/'block'; 

可以通过

删除单元格

var row = document.getElementById("myRow");
row.deleteCell(0);

顺便提个建议。