Raphaël: Simple graphics wrapper on top of SVG and VML
Date : 2008 08 08 Category : Tech & Development
AjaxianDmitry Baranovskiy of Atlassian has created Raphaël "a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library."
Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
The API looks like this:
PLAIN TEXT JAVASCRIPT: // 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 (#fff) circle.attr("stroke", "#fff");Check out demos showing reflection, image rotation, and text rotation.
Here is the reflection:
done via:
PLAIN TEXT JAVASCRIPT: $(function () { var src = $(".image img")[0].src; var R = Raphael("mirror", 320, 240); var gradient2 = {type: "linear", dots: [{color: "#000", opacity: .5}, {color: "#000"}], vector: [0, 0, 0, "100%"]}; R.image(src, 0, 0, 320, 320).matrix(1, 0, 0, -1, 0, 280); R.rect(-2, -2, 322, 83).attr({gradient: gradient2, "stroke-width": 0}); R.rect(-2, 80, 322, 240).attr({fill: "#000", "stroke-width": 0}); });(via Charles Miller)