使用cordova 和 pixi.js 无法在 iPhone 上呈现画布答案

【问题标题】：Canvas won't render on iphone with cordova and pixi.js使用cordova 和 pixi.js 无法在 iPhone 上呈现画布
【发布时间】：2016-11-20 14:42:53
【问题描述】：

在 iphone 上将画布附加到文档时遇到问题。运行时：cordova compile then：cordova 启动浏览器添加画布并呈现良好。使用 xcode 和 ios 模拟器，应用程序启动，但画布似乎永远不会被渲染。我在这里做错了吗？

onDeviceReady: function() {
    this.receivedEvent('deviceready');

    var Container  = PIXI.Container,
        autoDetectRenderer = PIXI.autoDetectRenderer,
        loader = PIXI.loader,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite,
        Rectangle = PIXI.Rectangle,
        TextureCache = PIXI.TextureCache,
        Graphics = PIXI.Graphics,
        Text = PIXI.Text,
        ParticleContainer = PIXI.ParticleContainer,
        stage,
        renderer;

    stage = new Container();

    renderer = new autoDetectRenderer(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.view);


},

【问题讨论】：

标签： javascript ios cordova canvas pixi.js

【解决方案1】：

在该代码示例中，您从未真正呈现容器。检查 PIXI 示例，例如这里：https://pixijs.github.io/examples/#/basics/basic.js

所以你还需要调用： renderer.render(stage);

你很可能需要 requestAnimationFrame(functionToCall);当你有移动部件时，调用那里实际运行游戏。

【讨论】：

【解决方案2】：

与其他答案一样，您需要使用本机方法 requestAnimationFrame 递归调用 renderer.render(stage)。此外，Cordova 只是在 Web 视图中运行的网页，此示例将在任何 Web 浏览器中运行。

 onDeviceReady: function() {
     this.receivedEvent('deviceready');
    var Container  = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite,
    Rectangle = PIXI.Rectangle,
    TextureCache = PIXI.TextureCache,
    Graphics = PIXI.Graphics,
    Text = PIXI.Text,
    ParticleContainer = PIXI.ParticleContainer,
    stage,
    renderer;
    stage = new Container();
    renderer = new autoDetectRenderer(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.view);        
    // requestAnimationFrame will make gameLoop recursive
    function gameLoop() {
      // Loop this function 60 times per second
      requestAnimationFrame(gameLoop);
      //HERE: <-- the logic of your game or animation 
      renderer.render(stage);
   }  
   gameLoop();

有关requestAnimationFrame 的更多说明，请阅读以下链接https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

【讨论】：