Centering pixi graphic primitives, positions

[Freckles]

let bigRect = new PIXI.Graphics();
bigRect.beginFill('0x00FF00');
bigRect.drawRect(0, 0, 200, 150);
bigRect.endFill();

let smallRect = new PIXI.Graphics();
smallRect.beginFill('0xFFFF00');
smallRect.drawRect(0, 0, 190, 140);
smallRect.endFill();

let smallRect_x = bigRect.x + (bigRect.width - smallRect.width)/2;
let smallRect_y = bigRect.y + (bigRect.height - smallRect.height)/2;
smallRect.position.set(smallRect_x, smallRect_y);

app.stage.addChild(bigRect);
bigRect.addChild(smallRect);

bigRect.position.set(100, 100);

I want to center smallRect inside bigRect. Why is it working in the code above when positions are set to (0, 0) initially, but wouldn't work if I had any position other than (0, 0) for the bigRect. It's not a problem to set the initial positions to (0, 0) and than change them, I just want to understand how it's working underneath.

[ivan.popelyshev]

x,y are actually part of "position" , and position is part of "transform". Its applied both to element and to child. So, if you have bigRect.x = 100 , then smallRect.x wil be also 100, and world coords of smallRect will become 200, that's your problem.

Don't worry, every user of Flash-like 2d renderers has to go through confusion over transforms

btw, if you use bigRect(90, 90, 200, 150) , that "90" wont appear as "bigRect.x" , and smallRect wont be centered. In your case bigRect.width is actually "bigRect.getLocalBounds().width" , calculated bounds of the graphics. yo can use "bigRect.getLocalBounds().x" to get what you want 

Edited May 5, 2020 by ivan.popelyshev

[Freckles]

Thanks a lot for clearing this up for me!