0

ここでは、Web から画像を読み込んで表示します。私はKineticJSを使用しています。私がやっていることは、最初に「読み込み中」の画像を読み込むプリロードを行い、実際の画像が読み込まれて表示する準備ができるまで表示することです。

だから、ここに私のコードがあります：

function CardObject(cardName)
{
this.name = cardName;

this.tapped = false;

// Create kinetic image with loading image
this.image = new Kinetic.Image({
        x: 10,
        y: 10,
        image: CardLoadingImage,
        width: CardWidth,
        height: CardHeight
    });

// Add actual image, and when loaded change it
this.imageObj = new Image();
this.imageObj.onload = function() //Problem here
{
    this.image.setImage(this.imageObj);
}
this.imageObj.src = "testImage.jpg";

// Add it to the stage
this.layer = new Kinetic.Layer();
this.layer.add(this.image);
Stage.add(this.layer);
}

ただし、imageObj の onload 関数に何か問題があります。エラーが表示されます: Uncaught TypeError: Cannot call method 'setImage' of undefined

デバッガーを見ると、関数内の「これ」はその画像オブジェクトであり、カードではありません...これは私が期待したものでも、必要なものでもありません。どうすれば修正できますか？

つまり、最初に、loadingImage を使用してキネティック イメージを作成します。次に、実際の画像が読み込まれたら、画像をその新しい画像に変更します。

ありがとう！-パブロ

4

1 に答える 1

2

カスタム変数を割り当ててからthis、そのカスタム変数を使用するか、jquery プロキシを使用します

function CardObject(cardName)
    {
    this.name = cardName;

    this.tapped = false;
    var that = this;//assigning custom variable

    // Create kinetic image with loading image
    this.image = new Kinetic.Image({
            x: 10,
            y: 10,
            image: CardLoadingImage,
            width: CardWidth,
            height: CardHeight
        });

    // Add actual image, and when loaded change it
    this.imageObj = new Image();
    this.imageObj.onload = function() //Problem here
    {
        that.image.setImage(this);//edited
    }
    this.imageObj.src = "testImage.jpg";

    // Add it to the stage
    this.layer = new Kinetic.Layer();
    this.layer.add(this.image);
    Stage.add(this.layer);
    }
于 2012-08-31T17:51:03.780 に答える