Zooming User Interface on HTML Canvas

Question

It happened that I have faced a task to create a ZUI (zooming user interface) on HTML Canvas. The examples of such interfaces are Deep Zoom and Microsoft's Seadragon.

I'm trying to find some libraries that will allow me to create ZUI without writing it by myself from scratch (though I have already done it for Mac and iOS).

---

The key features that library should have:

1. Have some kind of 'views' as basic elements and arrange them hierarchically
2. Draw vector graphics, text and images(optional) in views
3. Zooming up to 200x times
4. Mouse events that are handled by views (up/down, move, scroll)

Any suggestions (even if they don't fit the above conditions) will be very welcomed, as I have found nothing about ZUI on canvas.

Answer 1

Have you had a look at Zoomooz?

Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.

http://janne.aukia.com/zoomooz

You can use it to zoom to any DOM element. Works better with SVG than with Canvas though, since Canvas would show pixelated when zoomed in.

Answer 2

This might get you started: https://github.com/florianguenther/zui53

ZUI53 is a JavaScript Library to create powerful web-based Zoomable User Interfaces (ZUIs) with new technologies like HTML5 and CSS3.

There is also OpenSeadragon, but I'm not sure if it uses Canvas.

Answer 3

Have you looked at Piccolo2d seems to meet most of your requirements. Have a look at the video from Geneaquilts that shows how they used it for there interface.

Answer 4

There is also Taaspace.js that uses HTML and CSS3 but not Canvas. Taaspace tries to abstract out all the different input methods, making it compatible with for example touch screen devices. You could check out this example application.