1

I have a grid of zoomable div elements. When a div is clicked, it is zoomed, scaled and centered using Zoomooz.js. Inside each div is a drawable region (like Canvas) implemented using Raphäel.

My problem is that even though the zoom function work perfectly, the scaling of the div makes it impossible to do reasonably drawing on the div, since the div is scaled up, not just transformord to a larger width/height. I really want the zooming effect, but instead of scaling the div(s) my guess is that I want to do a transform on all the divs, and center the selected div using an easing effect or the like.

Any suggestions would be much appreciated!

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Lasse
  • 349
  • 1
  • 7
  • 16
  • 1
    @Murali: Ehm, could you please stop randomly adding code formatting to things that are not code? Those edits, contrary to the reason you give, do not "improve formatting"; they in fact make it quite a lot worse. That would be great. Thanks. – Lightness Races in Orbit Sep 26 '14 at 17:05

1 Answers1

0

One option would be to inverse-transform the canvas content. So, make the canvas double the size you would make it otherwise and then use something like -webkit-transform:scale(0.5); or similar to make it fit in the space reserved for it. Now, when you zoom to the element, you have double the resolution.

Another option would be to use SVG graphics or similar resolution-independent content for the drawing. Here is a site using Zoomooz with SVG: http://www.parti-socialiste.fr/bilan-sarkozy/

Janne Aukia
  • 1,003
  • 6
  • 7