1

私は気が狂ってしまう問題を抱えています。

1 つの JavaScript ファイルで完全に正常に動作するものがありますが、requirejs で使用すると完全に失敗します。

(function(){
define([], function (){
    var Sprite = function(){
        return {
            spritesheet:    null,
            canvas:         null,
            context:        null,

            init: function(src, ctx){
                this.canvas = document.createElement('canvas');
                this.context = this.canvas.getContext('2d');
                this.context.drawImage(src, 0, 0, 10, 20, 0, 0, 10, 20);
                ctx.drawImage(this.canvas, 100, 100);
            }
        };
};

return Sprite;
});
}
)();

そして、私が持っている他のファイルには:

(function(){
define(["r", "sprite", "player"], function (Ra, Sprite, Player){
    var Game = function()
    {
        return {
            ...SOME STUFF HERE...
            canvas: null,
            context: null,

            something: function() {
                this.canvas = document.getElementById("game");
                this.canvas.width = 500;
                this.canvas.height = 500;
                this.context = this.canvas.getContext("2d");

                var sprite = new Sprite();
                sprite.init("image.gif", this.context);
         };
     };

     return Game;
});
}
)();

できる限りコードを圧縮しようとしましたが、重要なものを切り取っていないことを願っていますが、それは基本的に機能していない部分です。私はrequirejsも初めてなので、信じられないほど間違ったことをしている場合は教えてください。

私が何をしても、すべてがうまくいっているように見えます.両方のキャンバスが作成され、すべてが適切なプロパティを持っています. キャンバスの代わりにプレーンな画像を配置すると問題なく機能しますが、キャンバス上のキャンバスは機能しません。

これは私を夢中にさせます。私は非常に多くの可能性を試しました。コードはrequirejsのすべてがなくても問題なく動作しますが、そのように構成すると失敗します。グローバルスコープと関係がありますか？これを機能させる方法は？キャンバスの中にキャンバスが必要です。

お時間をいただきありがとうございます！

編集：

<script data-main="main" src="libs/require/require.js"></script>私は自分のhtmlファイルと<canvas id="game"></canvas>本文にのみロードしました。

次に、main.jsに次のものがあります。

require.config({ 
baseUrl: "./modules",
waitSeconds: 10,
packages: [
    {
        name: "something not used yet",
        location: "something not used yet",
        main: "something not used yet"
    }
]
});

require(['game'], function (Game)
{
    var game = new Game();
    game.begin();
});

残りは、最初に示しました。

build フォルダーに main.html と main.js が一緒にあり、build/modules フォルダーに他のすべてがあります。

4

1 に答える 1

0

問題はこれまでで最もばかげたことであり、この明白なことを理解するために多くの時間を無駄にしました...

何らかの理由で、画像が読み込まれるのを待つのを完全に忘れて、読み込まれる前に画像を使い続けました。(少なくとも私にとっては) requirejs を使用するときの複雑な構造により、その間違いを特定するのが困難でした。

また、requirejs がなくても、イメージが非常に高速にロードされ、onload がなくても次の関数が開始される前に準備ができていたため、コードは機能しましたが、requirejs に切り替えたときに速度が低下したか、非同期の性質が問題を引き起こしたと思います。

とにかく、単純な onload ハンドラで解決しました。

于 2013-09-19T18:48:31.360 に答える