Muhammad Adnan

Zooming a graphic/container/element on click

Recommended Posts

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 by Muhammad Adnan
Needed to edit the picture names

Share this post

Link to post
Share on other sites

Here we are:

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.

Share this post

Link to post
Share on other sites

Hello Ivan,


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!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.