1

我正在使用 HTML5 画布绘制组织结构。每个节点包括一个图像，其 URL 是从数据库中获得的。我有一个处理图像加载的小函数，一旦加载，它就会将其添加到画布中。它看起来像这样（请注意，重要的是添加到图像的 onload 侦听器）：

(function (i, ctx, DrawId) {
    var img = new Image();
    img.src = REPORT.Structures[i].Managers[j].Employee.PhotoUrl; //get URL from object constructed elsewhere      
    img.onload = function () { //attach onload event          
            ctx.drawImage(img, x, y, width, height);//draw image on the canvas. x, y width and height are calculated inside the onload, but I have removed the calculations to improve readability
        }
    }
})(i, ctx, REPORT.DrawId);

这很好用，只是图像在完成加载时都会随机出现。它看起来很不整洁。

我正在寻找一种方法来使它看起来更平滑。我的第一直觉是尝试创建淡入淡出效果，但如果不一遍又一遍地重绘画布，我想不出如何做到这一点。

我曾想过尝试这样的事情：

img.onload = function () {
    var counter = 1;
    var width = 30 * REPORT.ZoomLevel;
    var height = 30 * REPORT.ZoomLevel;
    function fadeInImage(ctx, img, x, y, width, height) {
        ctx.globalAlpha = 0.1 * counter;
        ctx.drawImage(img, x, y, width, height);
        counter++;
        if (counter == 10)
            clearTimeout(fadeInImageTimeout);
        console.log(counter);
    }
    var fadeInImageTimeout = setInterval(function () { fadeInImage(ctx, img, x, y, width, height); }, 100);
}

这行得通，但我也担心如果这样做，它的处理量会太大。

有没有人试过做这样的事情？任何建议将不胜感激。

PS：我目前正在考虑只使用一个间隔来绘制所有图像。每个图像将被推入一个数组，一旦加载所有图像，就会绘制数组中的所有元素。会及时更新。

PPS：正如我在上面的 PS 中提到的那样，我已经设法让它工作。不过好像不影响性能。我想我仍然遇到的延迟与图像加载时间有关。我会尝试将代码剥离成一个简单的版本并稍后在此处发布，但如果有人能看到我的方法中的缺陷，请毫不犹豫地指出它。再次，任何建议将不胜感激。

4

0 回答 0