search

davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Zoom at mouse position #202

Open krnbatta opened 4 years ago

krnbatta commented 4 years ago

Is there any way to get zooming focused at the mouse position. For now, it is difficult to understand the proper pattern to it. I want to zoom like how Google Maps work. Is this what originally happens or supposed to happen and I am doing something wrong? Or is there any particular flag that needs to be turned on or off?

davidfig commented 4 years ago

viewport.wheel() will let you zoom with the mouse wheel at the mouse location. See docs here: https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html#wheel

richard-ejem commented 4 years ago

It is actually broken if you don't render your canvas over whole body and do not supply an InteractionManager from PIXI app. Solution 1:

const viewport = new Viewport({
  divWheel: document.getElementById('my-canvas-wrapper'),
  interaction: app.renderer.plugins.interaction, // app is PIXI.Application
  ...
});

Solution 2: provide only divWheel and wait if https://github.com/davidfig/pixi-viewport/pull/226 gets merged :)

davidfig commented 4 years ago

Why do you prefer solution #2?

richard-ejem commented 4 years ago

I didn't mean I prefer it. I just noticed (and prepared a PR with fix) yesterday that the builtin handler is broken under these circumstances (we previously overlooked the insertion of PIXI interaction manager in our codebase). I actually used the solution 1 in my codebase too because I think it will lead to more consistent behavior with PIXI app itself, however the bug is still worth fixing.