pixi-viewport icon indicating copy to clipboard operation
pixi-viewport copied to clipboard

Published 20 hours ago • verified publisher icon davidfig

Position center of viewport

Open ghost opened this issue 6 years ago • 8 comments

Looking for advice on the appropriate API to use to center the viewport to a specific location, and a specific zoom level.

fitWidth is getting me close to what I need, however the centered position I require is in negative Y. Attempting to call moveCenter(2.5, -2.5) seems to break the positioning.

ghost avatar Oct 04 '19 17:10 ghost

Hmmm...that's weird. moveCenter() works fine with negative values. You're doing it the right way: fitWidth() and moveCenter() (in either order). Can you provide more details on the center not working properly?

Many times it's caused by screenWidth/screenHeight not being set correctly on initialize.

davidfig avatar Oct 06 '19 02:10 davidfig

screenWidth and screenHeight are initialized to the containing html element's "clientWidth" and "clientHeight".

Could you provide a quick sample of positioning the center of the viewport to a negative Y value?

ghost avatar Oct 10 '19 14:10 ghost

sorry, this got lost. did you figure it out? viewport.moveCenter(-100, -100) should work without problems.

davidfig avatar Oct 23 '19 05:10 davidfig

I have a similar problem, but I don't understand how to solve it:

  • I draw a network visualization
  • I set the zoom to fit it in the screen with .setZoom(.5)
  • I don't understand how to center it

I've checked .scaled() but it seems just to retrieve the scale.

Can you help me?

This is the weblink: https://rodighiero.github.io/COVID-19/

rodighiero avatar May 19 '20 13:05 rodighiero

Call viewport.moveCenter(x, y) where (x, y) is the world coordinates that you want at the center of the screen. Two coordinate systems: (1) the screen coordinates: this is the screen with 0, 0 at the top-left of the screen, and (2) the world coordinates: this is relative to the viewport container and includes your "world" elements, ie, all children of your viewport. This is moved by viewport.

So say you have a rectangle at (0, 0, 100, 100) and you want that box in the middle of the screen, you would call viewport.moveCenter(50, 50).

(This is assuming your viewport is full screen. If it's partial, think about "screen" as your canvas.

davidfig avatar May 20 '20 05:05 davidfig

That's perfect too, thank you!

rodighiero avatar May 22 '20 13:05 rodighiero

Thanks for the info here. Another way to center and fit the viewport is: viewport.setTransform(0, 0, 1, 1).fit(true)

git-ashish avatar Mar 08 '22 05:03 git-ashish