javascript - 在 JavaScript 中加载平铺图像并将其绘制到 Canvas

Question

我似乎很清楚如何使用 JavaScript 动态加载和绘制图像。我附加了一个 onload 函数并设置了图像源:

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "your_img_path";

我想对二维图像(图 block )阵列执行此操作并多次更新这些图 block 。但是，如后所述，我在实现时遇到了问题。

我编写的函数(如下所示)包含一些与我当前问题无关的计算。它们的目的是允许平移/缩放图 block (模拟相机)。选择要加载的图 block 取决于请求呈现的位置。

setInterval(redraw, 35);

function redraw()
{
    var canvas = document.getElementById("MyCanvas");
    var ctx = canvas.getContext("2d");

    //Make canvas full screen.
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;

    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    //Compute the range of in-game coordinates.
    var lowestX = currentX - (window.innerWidth / 2) / zoom;
    var highestX = currentX + (window.innerWidth / 2) / zoom;
    var lowestY = currentY - (window.innerHeight / 2) / zoom;
    var highestY = currentY + (window.innerHeight / 2) / zoom;

    //Compute the amount of tiles that can be displayed in each direction.
    var imagesX = Math.ceil((highestX - lowestX) / imageSize);
    var imagesY = Math.ceil((highestY - lowestY) / imageSize);

    //Compute viewport offsets for the grid of tiles.
    var offsetX = -(mod(currentX, imageSize) * mapZoom);
    var offsetY = -(mod(currentY, imageSize) * mapZoom);

    //Create array to store 2D grid of tiles and iterate through.
    var imgArray = new Array(imagesY * imagesX);
    for (var yIndex = 0; yIndex < imagesY; yIndex++) {
        for (var xIndex = 0; xIndex < imagesX; xIndex++) {
            //Determine name of image to load.
            var iLocX = (lowestX + (offsetX / mapZoom) + (xIndex * imageSize));
            var iLocY = (lowestY + (offsetY / mapZoom) + (yIndex * imageSize));
            var iNameX = Math.floor(iLocX / imageSize);
            var iNameY = Math.floor(iLocY / imageSize);

            //Construct image name.
            var imageName = "Game/Tiles_" + iNameX + "x" + iNameY + ".png";

            //Determine the viewport coordinates of the images.
            var viewX = offsetX + (xIndex * imageSize * zoom);
            var viewY = offsetY + (yIndex * imageSize * zoom);

            //Create Image
            imgArray[yIndex * imagesX + xIndex] = new Image();
            imgArray[yIndex * imagesX + xIndex].onload = function() {
                ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
            };
            imgArray[yIndex * imagesX + xIndex].src = imageName;
        }   
    }    
}

如您所见，函数中声明了一个数组，其大小等于显示的图 block 网格的大小。数组的元素表面上充满了动态加载后绘制的图像。不幸的是，我的浏览器不认为 imgArray[yIndex * imagesX + xIndex] 是图像，我收到错误消息:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

另外，我本来以为数组不是必需的。毕竟，如果我只是要在下次调用 redraw 时加载一个新图像，为什么我需要在完成绘制后保留图像的句柄？在这种情况下，循环看起来像这样:

for (var yIndex = 0; yIndex < imagesY; yIndex++) {
    for (var xIndex = 0; xIndex < imagesX; xIndex++) {
        //Determine name of image to load.
        var iLocX = (lowestX + (offsetX / mapZoom) + (xIndex * imageSize));
        var iLocY = (lowestY + (offsetY / mapZoom) + (yIndex * imageSize));
        var iNameX = Math.floor(iLocX / imageSize);
        var iNameY = Math.floor(iLocY / imageSize);

        //Construct image name.
        var imageName = "Game/Tiles_" + iNameX + "x" + iNameY + ".png";

        //Determine the viewport coordinates of the images.
        var viewX = offsetX + (xIndex * imageSize * zoom);
        var viewY = offsetY + (yIndex * imageSize * zoom);

        //Create Image
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(img, viewX, viewY, imageSize * zoom, imageSize * zoom);
        };
        img.src = imageName;
    }   
}

自从上次处理的图 block 被渲染后，我对这种方法的运气就更好了。尽管如此，所有其他瓷砖都没有绘制。我想我可能已经覆盖了一些东西，所以只有最后一个保留了它的值。

1. 那么，我该怎么做才能重复渲染 2D 瓦片网格，以便瓦片始终加载？

2. 为什么数组元素不被视为图像？

Answer 1

您犯了所有 JavaScript 程序员都曾犯过的经典错误。问题出在这里:

imgArray[yIndex * imagesX + xIndex].onload = function() {
    ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
};

您在循环中定义一个函数，并期望每个函数都有自己的变量副本。事实并非如此。您定义的每个函数都使用相同的变量 yIndex、xIndex、viewX 和 viewY。请注意，函数使用这些变量，而不是这些变量的值。

这很重要:你在循环中定义的函数不使用yIndex(和xIndex、viewX、viewY) 在你定义函数的时候。函数使用变量本身。每个函数在执行函数时计算 yIndex(和 xIndex 以及其余部分)。

我们说这些变量已经绑定(bind)在一个 closure 中.当循环结束时，yIndex 和 xIndex 超出范围，因此函数计算超出数组末尾的位置。

解决方案是编写另一个函数，向其传递 yIndex、xIndex、viewX 和 viewY ，它创建了一个新函数来捕获您要使用的值。这些值将存储在与循环中的变量分开的新变量中。

您可以将此函数定义放在 redraw() 中，在循环之前:

function makeImageFunction(yIndex, xIndex, viewX, viewY) {
    return function () {
        ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
    };
}

现在将有问题的行替换为对函数创建函数的调用:

imgArray[yIndex * imagesX + xIndex].onload = makeImageFunction(yIndex, xIndex, viewX, viewY);

此外，请确保您设置的是正确图像的来源:

imgArray[yIndex * imagesX + xIndex].src = imageName;

为了使您的代码更易于阅读和维护，请分解出 yIndex * imagesX + xIndex 的重复计算。最好计算一次图像索引并在所有地方使用它。

您可以像这样简化makeImageFunction:

function makeImageFunction(index, viewX, viewY) {
    return function () {
        ctx.drawImage(imgArray[index], viewX, viewY, imageSize * zoom, imageSize * zoom);
    };
}

然后在循环中写下:

// Create image.
var index = yIndex * imagesX + xIndex;
imgArray[index] = new Image();
imgArray[index].onload = makeImageFunction(index, viewX, viewY);
imgArray[index].src = imageName;

您可能还希望分解出 imgArray[index]:

// Create image.
var index = yIndex * imagesX + xIndex;
var image = imgArray[index] = new Image();
image.onload = makeImageFunction(index, viewX, viewY);
image.src = imageName;

在这一点上，我们问自己为什么我们有一个图像数组。如果，正如您在问题中所说，一旦您加载了图像，您就不再需要该数组，我们可以完全摆脱它。

现在我们传递给 makeImageFunction 的参数是图像:

function makeImageFunction(image, viewX, viewY) {
    return function () {
        ctx.drawImage(image, viewX, viewY, imageSize * zoom, imageSize * zoom);
    };
}

在循环中我们有:

// Create image.
var image = new Image();
image.onload = makeImageFunction(image, viewX, viewY);
image.src = imageName;

这看起来类似于您在问题中提到的替代方案，只是它在循环内没有函数定义。相反，它调用一个函数制作函数，该函数在新函数中捕获 image、viewX 和 viewY 的当前值。

现在您可以弄清楚为什么您的原始代码只绘制了最后一张图像。您的循环定义了一大堆函数，它们都引用了变量 image。当循环结束时，image 的值是您制作的最后一张图像，因此所有函数都引用最后一张图像。因此，他们都画了同一个图像。他们将其绘制在相同的位置，因为它们都使用相同的变量 viewX 和 viewY。