Jump to content

Zooming a graphic/container/element on click

Muhammad Adnan

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
Link to comment
Share on other sites


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. 

Link to comment
Share on other sites

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.

Link to comment
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!

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.

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.


  • Recently Browsing   0 members

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