davidfig/pixi-viewport

Bounce box works, but places image not in center

Closed this issue · 1 comments

Hi all,
I am using pixi-viewport in vue 3.
I got the bounce box to work and I've set it up like so:

viewport.bounce({
          friction: .1,
          bounceBox: new Rectangle(0, 0,
              window.innerWidth,
              window.innerHeight)
        })

But when the image crosses the boundries it bounces back, but not to the center of the screen.
How can I achieve that?

Thanks in advance.

(Sorry for low frame rate, file was too big)
Animation

I've found a way.

Instead of centering the image by calculating the x & y position based on the window widht & height / 2 minus the image width & height,

img.x = (window.innerWidth / 2) - (img.width / 2);
img.y = (window.innerHeight / 2) - (img.height / 2);

I used PixiJs-viewport's moveCenter function to center the image:

viewport.moveCenter(img.x, img.y);

This places the image in the center, and when dragged out of bounds it bounces back to the center as well.