Question

我正在开展一个项目，要求我通过javascript控制纸张，而不是使用正常的papercript路线。我现在因为一种我似乎无法弄清楚的奇怪行为而陷入困境。这是我正在运行的代码的简化版本

paper.install(window);
$(document).ready(function() { 
    paper.setup("canvas");
    Game.ship = new Ship(view.center, 1) // Essentially calls new Raster("imgid"); and positions it
    view.draw(); 
});

由于某种原因，此代码导致空白画布。有点奇怪的是，如果我在几秒钟后在我的开发控制台中调用new Ship(...)，那么光栅在画布上渲染就好了。我还注意到，当我查看Game.ship.elem.__canvas的值时，我看到一个大小为32,32的canvas元素，即使DOM中没有这样的画布。

我认为这与时间有关，但我似乎无法弄清楚我必须做些什么来使它工作，除了使用setTimeout创建栅格的一些令人难以置信的混乱方法调用$(document).ready()后的秒数。

任何人都对这里发生了什么有什么想法，或者是什么可以引导我朝着正确的方向前进？

Answer 1

实际上我设法自己搞清楚了。对于遇到此问题的任何人来说，问题实际上是因为在图像加载完成之前ready()函数被称为。

因此，new Raster()调用正在将不存在的图像加载到画布中，导致空白结果！

尝试从javascript直接控制Paper.js时的奇怪行为

1 个答案: