2

スプライトシートを壊そうとしていますが、2D配列に配置されていません。私のコードの最後、console.logの近くで、ImageDataを吐き出します...しかし、putImageDataをしようとすると...Uncaught TypeError: Type error

ヘルプ？

これが私のコードです：

$(document).ready(function () {
    console.log("Client setup...");
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.tabIndex = 0;
    canvas.focus();
    console.log("Client focused.");

    var imageObj = new Image();
    imageObj.src = "./images/all_tiles.png";
    imageObj.onload = function() {
    context.drawImage(imageObj, imageWidth, imageHeight);
    };

    var allLoaded = 0;
    var tilesX = ImageWidth / tileWidth;
    var tilesY = ImageHeight / tileHeight;
    var totalTiles = tilesX * tilesY;        
    var tileData = [totalTiles]; // Array with reserved size
    for(var i=0; i<tilesY; i++)
    {
      for(var j=0; j<tilesX; j++)
      {           
        // Store the image data of each tile in the array.
        tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
        allLoaded++;
      }
    }

    if (allLoaded == totalTiles) {
    console.log("All done: " + allLoaded);
    console.log(tileData[1]);
    context.putImageData(tileData[0], 0 ,0); // Sample paint
    }


});

エラーはで発生しますcontext.putImageData(tileData[0], 0 ,0); // Sample paint

これがhttp://jsfiddle.net/47XUA/の上のコードのフィドルの例です

4

5 に答える 5

4

あなたの問題は、の最初の要素がオブジェクトでtileDataはなく、単純な数であるということです！使用したアレイを初期化したとき：ImageData

var tileData = [totalTiles];

これは、が数値であるの値に等しいことを意味しtileData[0]ます。にオブジェクトの代わりに数値を指定しているのに、ブラウザが混乱してエラーをスローしています。配列の残りの部分にある他の要素を見ると、期待どおりにオブジェクトが正常に入力されていることがわかります。配列の最初の要素のみが数値です。totalTiles483ImageDataputImageDataImageData

あなたはおそらくするつもりでした：

var tileData = new Array(totalTiles);

lengthこれにより、配列の最初の値を数値に設定する代わりに、指定されたプロパティで配列が作成されます。個人的には、いくつかのパフォーマンステストを実行して、それがさらに役立つかどうかを確認します。あなたも同じように使用している可能性がありますvar tileData = [];

于 2012-07-18T15:47:02.413 に答える
3

型エラーは、ステートメントに渡された変数またはオブジェクトがそのコマンドに期待される型ではなく、有効なものに変換できない場合に発生します。

エラーの完全な定義については、ここを参照してください。

そのため、コンテキストまたはtileDataの形式が正しくないか、nullまたは未定義である可能性があります

于 2012-10-11T19:30:08.903 に答える
0

ここでの問題はimageObj.onload()、スクリプトの残りの部分が実行された後に関数が呼び出されることです。

これはgetImageData()、呼び出されたときにキャンバスに画像データがないため、へのクエリが未定義を返すことを意味します。

これを修正する簡単な方法は、次のimageObj.onloadように、関数内の残りのスクリプトをカプセル化することです。

$(document).ready(function () {
console.log("Client setup...");
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.tabIndex = 0;
canvas.focus();
console.log("Client focused.");

var imageObj = new Image();
imageObj.src = "./images/all_tiles.png";

imageObj.onload = function() {

  context.drawImage(imageObj, 0, 0);

  var allLoaded = 0;
  var tilesX = imageWidth / tileWidth;
  var tilesY = imageHeight / tileHeight;
  var totalTiles = tilesX * tilesY;        
  var tileData = new Array(); // Array with NO reserved size
  for(var i=0; i<tilesY; i++)
  {
    for(var j=0; j<tilesX; j++)
    {           
      // Store the image data of each tile in the array.
      tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
      allLoaded++;
    }
  }

  context.putImageData(tileData[0], 0 ,0); // Sample paint
}; // End 'imageObj.onload()' scope.

}); // End document ready function scope.

これにより、の呼び出しgetImageData()が後に行われるようになりますcontext.drawImage()

また、キャンバスを覆うように画像を描画していないという問題が発生する場合もあります。行を変更します。

context.drawImage(imageObj, imageWidth, imageHeight);

に

context.drawImage(imageObj, 0, 0);

編集：あなたも持っていましたImageWidth（imageWidth高さも同じです）。これらの名前を変更します。

編集：ここで配列サイズを予約するとnew Array(totalTiles)、問題が発生していました。新しいタイル画像を配列にプッシュすると、事前に割り当てられた配列の最後（から始まるtileData[totalTiles]）にプッシュされました。これは、size引数を削除することで簡単に修正できます。それ以外の場合は、を使用する代わりにpush()、画像データをループ内の配列にコピーできます。例：tileData[n] = getImageData(...)、から開始しtileData[0]ます。

于 2012-07-18T15:18:11.477 に答える
0

競合状態の可能性があります。drawImageを使用しているのは、画像./images/all_tiles.pngが読み込まれている場合のみです。ただし、onloadが起動される前のコンテキストで画像データを使用しています。onloadハンドラーの後にあるすべてのものをonloadハンドラーに移動してみてください。

于 2012-07-18T11:19:43.140 に答える
0

Chromeを使用しています。

context.drawImage(spritesheet.image, 0, 0, 4608, 768);// Works
context.drawImage(spritesheet.image, 768, 0, 768, 768, 4608, 768); // Doesn't work: Uncaught TypeError: Type error

ありがとうございました！

于 2013-09-18T09:58:12.653 に答える