Question

我使用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上面提到的那样工作。但它似乎并没有影响性能。我想我仍然遇到的滞后与图像加载时间有关。我会尝试将代码删除到一个简单的版本并稍后发布，但如果有人能看到我的方法存在缺陷，请不要犹豫，指出它。再次，任何建议将不胜感激。

将图像添加到HTML5画布时淡入图像 - 处理时间问题

0 个答案: