Raphaël: Simple graphics wrapper on top of SVG and VML
Written by on August 8th, 2008 in Uncategorized.
Dmitry 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:
-
-
// 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:
-
-
$(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)
Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/359434674/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml