pixijs: v4 wrong width/height behaviour of PIXI.Graphics and PIXI.Container

var renderer = new PIXI.WebGLRenderer(800, 600);

document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

var g = new PIXI.Graphics();
g.beginFill(0xff00ff, 0.5);
g.drawRect(0, 0, 100, 100);
g.endFill();
stage.addChild(g);

setInterval(function(){ g.width = 200; console.log(g.width); }, 1000);

animate();

function animate() {
    requestAnimationFrame(animate);

    renderer.render(stage);
}

Expected result: after one second the graphics object resizes to width 200 and is not resizing anymore Actual result: the graphics object width jumping from 100 to 200 every second

Edit: also PIXI.Container has problems with width and height:

var renderer = new PIXI.WebGLRenderer(800, 600);

document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

PIXI.loader.add("test", "bunny.png").load(function() {

    var c = new PIXI.Container();
    stage.addChild(c);

    console.log("container w/h", c.width, c.height); // correct (0,0)

    bunny = PIXI.Sprite.fromImage("bunny.png");

    console.log("bunny w/h", bunny.width, bunny.height); // correct

    c.addChild(bunny);

    console.log("container w/h", c.width, c.height); // incorrect (0,0) should be the same size as bunny

    setTimeout(function() {
        console.log("container w/h", c.width, c.height); // correct
    }, 500);

    animate();
});

function animate() {
    requestAnimationFrame(animate);

    renderer.render(stage);
}

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 44 (25 by maintainers)

Most upvoted comments