UI scaling on HTML canvas

Question

It so happened that I was faced with the task of creating ZUI (scaling the user interface) on HTML Canvas. Examples of such interfaces are Deep Zoom and Microsoft Seadragon.

I am trying to find some libraries that will allow me to create ZUI without writing it myself from scratch (although I already did this for Mac and iOS).

---

The main functions that the library should have:

• They have some kind of "representation" as the main elements and arrange them hierarchically
• Draw vector graphics, text and images (optional) in views
• Magnification up to 200 times
• Mouse events handled by views (up / down, move, scroll)

Any suggestions (even if they do not meet the above conditions) will be very welcome, since I did not find anything about ZUI on the canvas.

Answer 1

Have you watched Zoomooz?

Zoomooz is a jQuery plugin for zooming in on web pages. It can be used to create Prezi, like a slide show, and also to scale images or other details.

http://janne.aukia.com/zoomooz

You can use it to enlarge to any DOM element. Works better with SVG than with Canvas, though, since the Canvas will display in pixels when zoomed in.

Answer 2

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

ZUI53 - JavaScript - Zoomable (ZUI) , HTML5 CSS3.

OpenSeadragon, , Canvas.

Answer 3

Piccolo2d, , . Geneaquilts, , .

Answer 4

Taaspace.js, HTML CSS3, Canvas. Taaspace , , , . .