코드 바 및 pixi.js를 사용하여 캔버스가 아이폰에 렌더링되지 않습니다.

Question

아이폰의 문서에 캔버스와 관련된 문제가 있습니다. 실행 중일 때 : cordova 컴파일 : cordova 실행 브라우저 canvas가 추가되어 잘 렌더링됩니다. 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); 


}, 

Answer 1

이 코드 예제에서는 실제로 컨테이너를 렌더링하지 않습니다. 예를 들어 PIXI 예를 확인하십시오. 여기 : https://pixijs.github.io/examples/#/basics/basic.js

renderer.render (stage);

그리고 대부분 requestAnimationFrame (functionToCall)이 필요합니다. 움직이는 부분이있을 때 실제로 게임을 실행하도록 전화하십시오.

Answer 2

다른 대답과 마찬가지로 을 원시 메서드 requestAnimationFrame으로 재귀 호출해야합니다. 또한 Cordova는 웹보기에서 실행되는 웹 페이지 일 뿐이며,이 예제는 모든 웹 브라우저에서 실행됩니다.

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/