1

これで、スプラッシュ スクリーンのコンストラクタができました。キャンバス グラフィックを使用しています (以下の ctx はキャンバス要素の 2d コンテキストへの参照です)、コンテキストのローカル コピーを取得しようとすると、それが失われるようです。誰かがなぜそれがどこで未定義になるのか考えていますか? (以下を参照)

function SplashScreen(_ctx)
{
    this.loadScene = function()
    {
        this.img = new Image();
        this.img.onload = this.render;
        this.img.src = 'art/SplashScreen.png';
    };

    this.unloadScene = function()
    {
        delete this.img;
        this.img = null;
        CollectGarbage();
    };

    this.render = function()
    {
        alert(this.ctx);//<--------------undefined
        alert(this.img);//<--------------undefined
        this.ctx.drawImage(this.img,0,0);
    };

    alert(_ctx);    //<--------------properly defined
    this.ctx = _ctx;
    alert(this.ctx);//<--------------properly defined
    return this;
}

ここで SplashScreen を呼び出しています (注: 以下は main.js からのもので、上は splashscreen.js にあります):

var ctx;

var scene_Splash;
var currentScene;

function main()
{
  ctx = document.getElementById('canvas').getContext('2d');
  alert(ctx); //<-------fine and defined
  scene_Splash = new SplashScreen(ctx);
  changeScene(scene_Splash, null, null);
}

function changeScene(_newScene, _transition, _time)
{
  currentScene = _newScene;

  currentScene.loadScene();
}

これをさらに拡張すると、これらのスクリプトを参照している index.html ファイルの一部が次のようになります。

<html>
 <head>
    <script language="JavaScript" type="text/javascript" src="splashscreen.js"></script>
    <script language="JavaScript" type="text/javascript" src="main.js"></script>
 </head>
 <body onload="main()">
   <canvas id="canvas" width="640" height="960"></canvas>
 </body>
</html>
4

4 に答える 4

1

試す：

this.img.onload = this.render.bind(this);
于 2012-06-08T20:22:02.997 に答える
1

私にとってはうまくいきます：

function SplashScreen(_ctx)
{
    this.loadScene = function()
    {
        this.img = new Image();
        this.img.onload = this.render;
        this.img.src = 'art/SplashScreen.png';
    };

    this.unloadScene = function()
    {
        delete this.img;
        this.img = null;
        CollectGarbage();
    };

    this.render = function()
    {
        alert('in render: ' + this.ctx);
    };

    alert(_ctx);    //<--------------properly defined
    this.ctx = _ctx;
    alert(this.ctx);//<--------------properly defined
    return this;
}

var c = new SplashScreen(1);
c.render(); // in render: 1

newキーワードを使用してオブジェクトをインスタンス化してください。

于 2012-06-08T19:48:25.157 に答える
0

関数をイベント ハンドラーにバインドすると、その関数は、ハンドラーをアタッチした要素のプロパティであるかのように呼び出されます。関数は、それが他の任意のオブジェクトのプロパティであったことを知りません。

これを回避する通常の方法は、1 つ以上のクロージャーを使用して、イベント ハンドラーの処理中に使用できるようにする変数の値を取得することです。

仕様によると、関数ではなく handleEvent メソッドでオブジェクトを渡すことができるはずです。次に、このメソッドが期待どおりに呼び出されます。つまり、関数はオブジェクトのプロパティとして呼び出されます。これが現在 Firefox で機能することは知っていますが、他のブラウザーで機能するかどうかはわかりません。

于 2012-06-08T20:16:33.193 に答える
0

Esailja は私を混乱させていた問題を発見しました。他の人も同様に指摘しましたが、これが最初でした。

それを呼び出していない@Zahelは、イベントリスナーとして画像のonloadイベントに追加しています。ブラウザは、画像がロードされたときにそれを呼び出します。これは、明らかに .img または .ctx プロパティを持たない画像に設定されています。– エサイリヤ

于 2012-06-08T20:39:24.447 に答える