0 
var canvas = null;
var context = null;
var img = null;
var frames = [];
var assets = [];
var imgLoadCount = 0;

setup = function (fileArray) {
  assets = fileArray;
  //Loading an image
  for(var i = 0; i < assets.length; i++) {
    console.log(i);
    frames.push(new Image()); // declare image object
    frames[i].onload = onImageLoad(assets.length); //declare onload method
    frames[i].src = URL.createObjectURL(assets[i]); //set url 
  }
};

onImageLoad = function (len) {
  console.log("IMAGE!!!");
  canvas = document.getElementById("my_canvas"); //creates a canvas element
  context = canvas.getContext('2d');
  canvas.width = window.innerWidth; //for full screen
  canvas.height = window.innerHeight;
  var x, y, numTilesRow;
  numTilesRow = 10;
  imgLoadCount++;
  console.log("imgLoadCount = " + frames.length + ", length = " + len);
  if(imgLoadCount != len) {
    return;
  }
  for(var index = 0; index < len; index++) {
    x = Math.floor((index % numTilesRow));
    y = Math.floor(index / numTilesRow);
    worldX = x * numTilesRow;
    worldY = y * numTilesRow;
    context.drawImage(frames[index], worldX, worldY);
  }
};

すべての画像が適切に読み込まれるようにするコード if(imgLoadCount != len) {return;} を挿入した後、drawImage が突然動作を停止した理由がわかりません。この問題の解決策を見つけるのを手伝ってください。

4

1 に答える 1

1

関数参照と関数呼び出しの違いを理解する必要があります。.onloadプロパティは関数参照で割り当てられることを期待していますが、関数へのimmediate(!)呼び出しの戻り値で割り当てます.onImageLoad。違いは括弧()です。

へのコールバックとしてパラメーターを使用して関数を呼び出したい場合は.onload、それを無名関数 (それ自体が関数参照) に含める必要があります。

frames[i].onload = function() {onImageLoad(assets.length);};

もちろん、これでクロージャを作成します。これは、実行の時点で、onImageLoad()メソッドが現在の値にアクセスできることを意味しますassets.length(割り当て時点の値ではありません!)。しかし、あなたの場合、決して変わらないので、これは何の違いもありませんassets.length。

于 2013-04-29T07:17:53.950 に答える