javascript graphics engine with zoom/mouse pan/rotate/text/events?

Question

Is there an open source javascript library able to create something like http://www.marcelbeumer.com/media/main/demos/ngen/index.html out of the box, or at most with a very simple plugin?

Note that you can: - zoom - pan with the mouse - rotate - render text - click on items

Double points if it works in android/iOS.

Answer 1

Perhaps you're looking for Raphaël. A javascript framework that works over SVG y VML. It's several functions and helpers, with scale (for zooming), pan, rotate, texting amongst them.

From the homepage:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Example of usage:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

Hope it helps.

PS: Forgot to mention, the homepage has a LOT of examples, seeing is a must.

EDIT: A similar question was made some time ago here Are there any good Javascript graphics libraries?