使用 PIXI 将图像添加到页面答案

【问题标题】：Adding image to page using PIXI使用 PIXI 将图像添加到页面
【发布时间】：2019-12-21 12:35:42
【问题描述】：

我正在使用 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 提供网页，因此路径是通过网络服务器，所以使用文件路径没有 CORS 问题。

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

谢谢，吉姆

【问题讨论】：

标签： rendering pixi.js

【解决方案1】：

当您只调用一次渲染时，您需要确保预先加载所需的所有资源。尝试使用 pixi 资产管理器进行预加载。干杯！

【讨论】：

嗨垫感谢您的回答。我猜我真的在问有没有办法在你的代码中不使用 requestAnimFrame( animate ) 。我的意思是，为了使用 PIXI，您是否需要调用 requestAnimFrame( animate ) 或者说在这种情况下兔子永远不会出现在舞台上？
不用担心。幸运的是，如果您不需要 requestAnimFrame，则不需要它。基本上你需要在调用 renderer.render(stage) 函数之前预加载兔子图形。否则，当您调用渲染函数时，兔子纹理可能还不存在 iyswim？

【解决方案2】：

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

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

【讨论】：