1

複数のキャンバスに異なる画像を適用しようとしています。

画像は、コード ビハインドで生成された json 配列に渡され、特定のキャンバスへの描画をループします。

現在、これはときどき機能するように見えますが、レンダリングがうまくいかないこともあります。

これがコードです。

function renderPlayer() {
        var imagesList = <%=imageList %>;
        var size = imagesList.length;
        for(var key in imagesList)
        {
            var image = imagesList[key][1];
            var gridPosition = imagesList[key][0];
            var playerCanvas = document.getElementById(gridPosition);
            window.context2 = playerCanvas.getContext("2d");
            //context2.save();
            playerCanvas.setAttribute("width", 97);
            var imageObj = new Image();
            imageObj.src = image;
            context2.drawImage(imageObj, 0, 10, 97, 97);
         }
    }

上記のコードは、期待する場所に配置しますが、ページがレンダリングされるたびに配置されません。

ただし、次のコードは最後の画像のみをレンダリングするように見えます。

        function renderPlayer() {
        var imagesList = <%=imageList %>;
        var size = imagesList.length;
        for(var key in imagesList)
        {
            var image = imagesList[key][1];
            var gridPosition = imagesList[key][0];
            var playerCanvas = document.getElementById(gridPosition);
            window.context2 = playerCanvas.getContext("2d");
            //context2.save();
            playerCanvas.setAttribute("width", 97);
            var imageObj = new Image();
            imageObj.onload = function(){
            context2.drawImage(imageObj, 0, 10, 97, 97);
            };
            imageObj.src = image;

         }
    }

なぜこれが機能しないのか、誰か提案がありますか?

4

2 に答える 2

0

同じ古い問題...すべての画像メソッドは、ループを介して毎回上書きされる onload唯一のものを参照しています。imageObj

for(var key in imagesList)
{
    var image = imagesList[key][1];
    var gridPosition = imagesList[key][0];
    var playerCanvas = document.getElementById(gridPosition);
    window.context2 = playerCanvas.getContext("2d");
    //context2.save();
    playerCanvas.setAttribute("width", 97);
    (function(){
        var imageObj = new Image();
        imageObj.onload = function(){
           context2.drawImage(imageObj, 0, 10, 97, 97);
        };
        imageObj.src = image;
    })();
 }

すぐに実行される関数ブロックでラップすることにより、それぞれimageObjが独自の変数になり、各オンロード関数がキャプチャします。

于 2013-04-11T14:15:43.427 に答える