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 回答