动态调整pixi阶段的大小，其内容在窗口大小调整和窗口加载上 [英] Dynamically resize the pixi stage and it's contents on window resize and window load

问题描述

我正在尝试在窗口调整大小上动态调整pixi阶段(画布和内容)的大小.并且还可以使它最初以浏览器窗口的大小加载，而无需更改比率.

我正在使用以下方法将初始大小基本上设置为window.innerWidth& window.innerHeight-但是它做了一些奇怪的事情，它以较小的尺寸(而不是html中指定的画布的尺寸)加载，然后进行扩展以适合窗口.

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();
}; 

这是我的onresize函数-它正在调整画布的大小，而不是内容的大小.我以为是要更新renderer.view，它会调整内容的大小，但是没有这样做-我如何调整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);

解决方案

您将需要设置大小和比率，以供resize事件函数引用.然后，您将需要一个检查窗口大小的调整大小功能，以便在调整大小时保持比率.我还手动运行调整大小功能以开始初始页面加载.

此外，请注意，我没有运行renderer.resize.我只是在调整绘图区域的大小.

这里有个小提琴供您查看: http://jsfiddle.net/2wjw043f/

这是小提琴代码:

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;

I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize. And also have it initially load at the size of the browser window without changing ratio.

I'm using the following to set the initial size basically to window.innerWidth & window.innerHeight - but it's doing something strange, it's loading at a smaller size (but not the size of the canvas specified in the html) then it's expanding to fit the window.

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();
}; 

Here's my onresize function - it's resizing the canvas, but not the content. I thought being that it's updating the renderer.view, it would resize the content, but it's not doing so - how do I resize the content of the stage/renderer.view content?

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);

解决方案

You will want to setup a size and ratio for the resize event function to reference. Then, you'll need a resize function that checks the window size in order to keep the ratio when resized. I'm also running the resize function manually to start for initial page load.

Also, note that I'm not running renderer.resize. I'm just resizing the drawing area.

Here's a fiddle for you to look at: http://jsfiddle.net/2wjw043f/

Here's the fiddle code:

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;

这篇关于动态调整pixi阶段的大小，其内容在窗口大小调整和窗口加载上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！