Zooming a graphic/container/element on click

[Muhammad Adnan]

Hey everyone!

I am trying to achieve a zoom on an element using PIXI

I have currently a graphics rectangle (see first image) It is the child of my stage which is the main container being rendered. My main container is as big as the browser screen. 
On clicking the graphics element I want the stage to zoom in in a way that I get this output (see second image) 

As you can see on the desired output I want the rectangle to take up the whole container. I am confused with what pivots do I choose and what new positioning do I set to achieve this and till what point do I scale this?

Edited December 13, 2017 by Muhammad Adnan
Needed to edit the picture names

[ivan.popelyshev]

Make a fiddle with your try. I'll edit it that it will work.

[Muhammad Adnan]

Ivan,

Here's the JS Fiddle link to the code : https://jsfiddle.net/adnanchang/dfhb2fjc/

As you can see I haven't put animationFrame in the grow function. This is because I want to see on every click(frame) where does the element go. And as you can also further see my attempt at zooming makes the element go out of the view at one point. 

[ivan.popelyshev]

Here we are: https://jsfiddle.net/dfhb2fjc/16/

There are two components of coordinates in graphics: 1. rect offset 2. graphics position.

The idea is that I pin stage position (0,0) to its pivot inside, which is our graphics left-top corner. To get the corner, i have to get local bounds and add it to graphics position. If you dont want to use rect offset, set graphics position instead.

Also if you dont want to use graphics at all, use Sprite with PIXI.TEXTURE.WHITE texture and custom width/height.

If you want to pin to center instead of left-top corner, set stage position to screen center, and pivot to center of graphics.

Its not easy to understand, and for even more difficult cases, you have to use toLocal, toGlobal methods. I'm afraid, you really have to study the math and how all things inside pixi Transform work. Its not easy to develop anything in any 2d system if you dont know how Transform work there.

[Muhammad Adnan]

Hello Ivan,

OMG THANK YOU THANK YOU THANK YOU

You really nailed it man. In regards to the Transform subject, can you refer me to an example or any tutorial that clears it out? The documentation regarding is very bland and doesn't help me capture the true essence of the subject matter.

Also, can you by any chance tell me the logic if I want to initially move the rectangle to the middle of the screen and then zoom it in. Because now it essentially goes to the corner and then increases in size. I will also try it out myself.

Once again, thank YOU!

[Muhammad Adnan]

Hey Ivan,

I kinda messed around with it more and here's what I have done. This is nearly close to what I want

https://jsfiddle.net/adnanchang/dfhb2fjc/18/

[ivan.popelyshev]

No examples, just experience and source code. You have to move it all to center, right now it works through top-left. Also, people use multiplication on scale, something like scale *= 1.01;