Jump to content

Centering pixi graphic primitives, positions


Freckles
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...