Dynamically resize the pixi stage and it's contents on window resize and window load

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;

Starting from PixiJS 5.0 you can simply use the resizeTo property of your Application:

let app = new PIXI.Application({ resizeTo: window });

Documentation: http://pixijs.download/release/docs/PIXI.Application.html#Application


I been using Pixi.js for a few weeks and worked on the same problem of resizing the canvas. This class creates a sprite that has a method "applyResize" that does most of the work. The size of the canvas background will equal the same as the parent "domElement" in the constructor. You have to add 'resize' event listener to the sprite after initializing it. Or you can do something else to improve it. 

class PixiBackground {

    constructor(type = 'cover', domElement, imgUrl) {
        this.domElement = domElement;
        this.imgUrl = imgUrl;
        this.parent = new PIXI.Container();
        this.sprite = new PIXI.Sprite.fromImage(this.imgUrl);
        this.parent.addChild(this.sprite);
        this.type = type;
    }

    addTo(container) {
        container.addChild(this.parent);
        this.applyResize();
    }

    applyResize() {
        const domSize = {
            x: this.domElement.clientWidth,
            y: this.domElement.clientHeight
        };
        const imageSize = {
            x: this.sprite.texture.width,
            y: this.sprite.texture.height
        };
        const domElementRatio = domSize.x / domSize.y;
        const imageRatio = imageSize.x / imageSize.y;
        var scale = 1;
        var position = new PIXI.Point(0, 0);

        if (this.type == 'cover' ? domElementRatio > imageRatio : domElementRatio < imageRatio) {
            //photo is taller than background
            scale = domSize.x / imageSize.x;
            position.y = -(imageSize.y * scale - domSize.y) / 2;
            position.x = 0;
        } else {
            //photo is wider than background
            scale = domSize.y / imageSize.y;
            position.x = -(imageSize.x * scale - domSize.x) / 2;
            position.y = 0;
        }
        this.sprite.scale = new PIXI.Point(scale, scale);
        this.sprite.position = position;
        return this;
    }
}

const imgUrl = 'https://images.unsplash.com/photo-1528723624453-3e53a413b392?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b44ae61a30e1a05f5defbf48cb5956eb';
const canvasParentElement = document.getElementById('canvasParentElement');
const renderer = PIXI.autoDetectRenderer({
    width: canvasParentElement.clientWidth,
    height: canvasParentElement.clientHeight
});
canvasParentElement.appendChild(renderer.view);

const stage = new PIXI.Container();
const pixiTestObject = new PixiBackground('cover', canvasParentElement, imgUrl);

PIXI.loader.add(imgUrl).load(function() {
    pixiTestObject.addTo(stage)
    requestAnimationFrame(animate);

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(stage);
    }
});

window.addEventListener('resize', debounce(() => onResizeWindow(), 250));
window.addEventListener('resize', debounce(() => pixiTestObject.applyResize(), 250));

// From underscrore.js
function debounce(func, wait, immediate) {
    let timeout;
    return function() {
        let args = arguments;
        let later = () => {
            timeout = null;
            if (!immediate) func.apply(this, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(this, args);
    }
}

function onResizeWindow() {
    const canvas = renderer.view;
    const w = canvasParentElement.clientWidth;
    const h = canvasParentElement.clientHeight;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    canvas.width = w;
    canvas.height = h;
    renderer.resize(w, h);
}
  #canvasParentElement {
    background: black;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
<div id="canvasParentElement"></div>

Tags:

Javascript

Jquery

Canvas

Pixi.Js

Recent Posts