Ridimensiona dinamicamente lo stage pixi e il suo contenuto sul ridimensionamento della finestra e sul caricamento della finestra

Question

Sto provando a ridimensionare dinamicamente lo stage pixi (tela e contenuto) sul ridimensionamento della finestra. Inoltre, caricare inizialmente le dimensioni della finestra del browser senza modificare il rapporto.

Sto utilizzando il seguente per impostare la dimensione iniziale fondamentalmente per window.innerWidth & window.innerHeight - ma che sta facendo qualcosa di strano, sta caricando in una dimensione più piccola (ma non la dimensione della tela specificato nel codice HTML) allora si sta espandendo a adattare la finestra

var w; 
var h; 

window.onload = function() { 
    var w = window.innerWidth; 
    var h = window.innerHeight; 

    //this part resizes the canvas but keeps ratio the same 
    renderer.view.style.width = w + "px"; 
    renderer.view.style.height = h + "px" 

// init(); 
}; 

Ecco la mia funzione onresize: sta ridimensionando la tela, ma non il contenuto. Ho pensato che stia aggiornando lo renderer.view, ridimensionerebbe il contenuto, ma non lo fa, come ridimensiono il contenuto del contenuto dello stage/renderer.view?

window.onresize = function (event){ 
    var w = window.innerWidth; 
    var h = window.innerHeight; 

    //this part resizes the canvas but keeps ratio the same 
    renderer.view.style.width = w + "px"; 
    renderer.view.style.height = h + "px"; 

    //this part adjusts the ratio: 
    renderer.resize(w,h); 
} 

    // create an new instance of a pixi stage 
    var stage = new PIXI.Stage(0xff00ff); 
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); 

    // add the renderer view element to the DOM 
    var mypixiStage = document.body.appendChild(renderer.view); 

Answer 1

Si desidera impostare una dimensione e un rapporto per la funzione di evento di ridimensionamento come riferimento. Quindi, avrai bisogno di una funzione di ridimensionamento che controlli le dimensioni della finestra per mantenere il rapporto quando ridimensionato. Sto anche eseguendo manualmente la funzione di ridimensionamento per iniziare il caricamento iniziale della pagina.

Inoltre, si noti che non sto utilizzando renderer.resize. Sto solo ridimensionando l'area di disegno.

Ecco un violino per voi a guardare: http://jsfiddle.net/2wjw043f/

Ecco il codice violino:

var size = [1920, 1080]; 
var ratio = size[0]/size[1]; 
var stage = new PIXI.Stage(0x333333, true); 
var renderer = PIXI.autoDetectRenderer(size[0], size[1], null); 
document.body.appendChild(renderer.view); 
var texture = new PIXI.RenderTexture(); 
r1 = new PIXI.Graphics(); 
r1.beginFill(0x00ffff); 
r1.drawRect(0, 0, 100, 100); 
r1.endFill(); 
texture.render(r1); 
var block = new PIXI.Sprite(texture); 
block.position.x = 100; 
block.position.y = 100; 
block.anchor.x = .5; 
block.anchor.y = .5; 
stage.addChild(block); 
requestAnimFrame(animate); 
resize(); 
function animate() { 
    requestAnimFrame(animate); 
    block.rotation += .01; 
    renderer.render(stage); 
} 
function resize() { 
    if (window.innerWidth/window.innerHeight >= ratio) { 
     var w = window.innerHeight * ratio; 
     var h = window.innerHeight; 
    } else { 
     var w = window.innerWidth; 
     var h = window.innerWidth/ratio; 
    } 
    renderer.view.style.width = w + 'px'; 
    renderer.view.style.height = h + 'px'; 
} 
window.onresize = resize;