Menu
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:
Any suggestions (even if they don't fit the above conditions) will be very welcomed, as I have found nothing about ZUI on canvas.
644
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. 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.
IIRC Canvas is a raster style bitmap. it wont be zoomable because there's no stored information to zoom to. Your best bet is to keep two copies in memory (zoomed and non) and swap them on mouse click. Show activity on this post.
Instead of the typical vertical scrolling site, where you traversed it downwards, this would could be traversed inwards. This is sort of design pattern has been categorised as a zoomable user interface or ZUI. The BeerCamp at SXSW 2011 was an experiment in using CSS transforms to create a new interface design pattern
(See Demo 3 – Fixed zoom .) Applying a scale that increases the size of container will zoom in on its content. Leveraging window scrolling is a natural convenient interaction to hook zooming into. Along side clicking and pointing, scrolling is a natural interaction that anyone with a mouse or keyboard uses.
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.
66
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.
39
answered Oct 14 '22 09:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
