Two.js: Pan and Zoom

[adamdburton]

This is a question rather than an issue but it's the best place to ask.

I'm trying to add a pan and zoom feature to the game I'm making (with two). I've got the pan working fine, but i'm struggling with the zoom. Would some kind person mind giving a quick example of how to zoom the scene to the mouse coordinates like Google Maps please?

[jonobr1]

This is actually fairly complicated. It requires manipulating the underlying matrix transformations for two.scene. I can work on a demo for you, but I can't really guarantee a timeline. There are 2 major things that need to be done in order for this to work:

• Matrix events need to be rewritten to be able to handle arbitrary matrix transformations, not just the translate, scale, rotate methods
• Wrapper functions need to be written in order to be able to properly direct transformation origin and scaling factors. A good example of these wrappers can be found in zui53 a css3 jQuery plugin.

[jonobr1]

So I've updated two.js polygons to have a matrix property which is an instance of Two.Matrix. This will allow you to do more sophisticated operations like the Google Maps interface. It can be used in conjunction with translation, scale, rotation, but it's recommended to use one paradigm or the other. I'll update at a later date with a Google Maps zoomable scene.

Here's the commit, but the latest build should have this bundled: https://github.com/jonobr1/two.js/commit/75a946afaac252f9c976f5121d7c8d36fb6f1da4

[adamdburton]

Thank you so much for this!

[jonobr1]

You'll need to update your two.js build, because I needed to add an inverse method to the Two.Matrix class. Here's an example using jQuery for mousewheel event:

http://jonobr1.github.io/two.js/examples/zui.html

Happy Coding.

[meetzaveri]

@adamdburton Hey, I would like to know that how did you implemented Pan feature?

[jonobr1]

As asked in https://github.com/jonobr1/two.js/issues/519, here's an updated example with the panning implemented as well. https://github.com/jonobr1/two.js/issues/519