使用PIXI向页面添加图像

Question

我使用的是来自PIXI的简单示例

示例的链接为：http://www.goodboydigital.com/pixi-js-tutorial-getting-started/

所以我做了一些更改，脚本标记中的代码现在是这个：

<script>
      // create an new instance of a pixi stage
      var stage = new PIXI.Stage(0x66FF99);
      console.log(stage);
      // create a renderer instance.
      var renderer = PIXI.autoDetectRenderer(400, 300);
      console.log(renderer);
      // add the renderer view element to the DOM
      document.body.appendChild(renderer.view);


      // create a texture from an image path
      var texture = PIXI.Texture.fromImage("bunny.png");
      // create a new Sprite using the texture
      var bunny = new PIXI.Sprite(texture);

      // center the sprites anchor point
      bunny.anchor.x = 0.5;
      bunny.anchor.y = 0.5;

      // move the sprite t the center of the screen
      bunny.position.x = 200;
      bunny.position.y = 150;

      stage.addChild(bunny);
      renderer.render(stage);

      // requestAnimFrame( animate );

      function animate() {
          requestAnimFrame(animate);
          // render the stage  
          renderer.render(stage);
      }
</script>

所以不要使用requestAnimFrame（animate）;我正在使用renderer.render（stage）;代替。

[在FF 32.0.3上发生了什么，它运行正常，bunny.png出现在舞台上的屏幕上。

在Chrome版本37.0.2062.124 m（64位）上，阶段出现，但没有兔子。

我也使用Xampp提供网页，因此路径是通过Web服务器，因此使用文件路径不会出现CORS问题。

有人知道为什么会这样吗？

谢谢，吉姆

Answer 1

[仅在一次调用render时，您需要确保预先加载了所需的所有资产。尝试使用pixi资产管理器进行预加载。干杯！

Answer 2

尝试在调用render之前预加载图像

var img = new Image();
img.onload = function() {
    renderer.render(stage);
}
img.src = 'bunny.png';

Answer 3

我目前正在通过PIXI教程进行黑客入侵，Chrome似乎不愿意将CORS用作砖墙。您对Xampp的设置是什么？enter image description here