3 Cross-browser vector graphics the easy way.
7 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.
9 Raphaël uses the SVG W3C Recommendation and VML (mostly equivalent Internet Explorer implementation) 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 (similar to Flash) compatible cross-browser and easy.
11 Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
15 Download and include ‘raphael.js’ (or, ‘raphael-packed.js’ for a minimized version) into your HTML page. When it’s loaded, use it as simply as:
17 // Creates canvas 320 × 200 at 10, 50
18 var paper = Raphael(10, 50, 320, 200);
19 // Creates circle at x = 50, y = 40, with radius 10
20 var circle = paper.circle(50, 40, 10);
21 // Sets the fill attribute of the circle to red (#f00)
22 circle.attr("fill", "#f00");
23 // Sets the stroke attribute of the circle to white (#fff)
24 circle.attr("stroke", "#fff");
28 This section provides a function reference for the Raphaël JavaScript library.
34 Creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
38 1. container HTMLElement or string
51 // Each of the following examples create a canvas that is 320px wide by 200px high
52 // Canvas is created at the viewport’s 10,50 coordinate
53 var paper = Raphael(10, 50, 320, 200);
54 // Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
55 var paper = Raphael(document.getElementById("notepad"), 320, 200);
57 var paper = Raphael("notepad", 320, 200);
59 ### Element’s generic methods
61 Each object created on the canvas shares these same generic methods:
65 Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
69 var c = paper.circle(10, 10, 10); // draw a circle at coordinate 0,0 with radius 10
70 c.node.onclick = function () { c.attr("fill", "red"); };
74 Rotates the element by the given degree from either its 0,0 corner or its centre point.
78 1. degree number Degree of rotation (0 – 360°)
79 2. isAbsolute boolean \[optional\] Specifies the rotation point. Use ‘true’ to rotate the element around its centre point. The default, ‘false’, rotates the element from its 0,0 coordinate.
83 var c = paper.circle(10, 10, 10);
84 c.rotate(45); // rotation is relative
85 c.rotate(45, true); // rotation is absolute
89 Moves the element around the canvas by the given distances.
93 1. dx number Pixels of translation by X axis
94 2. dy number Pixels of translation by Y axis
98 var c = paper.circle(10, 10, 10);
99 c.translate(10, 10); // moves the circle down the canvas, in a diagonal line
103 Resizes the element by the given multiplier.
107 1. Xtimes number Amount to scale horizontally
108 2. Ytimes number Amount to scale vertically
112 var c = paper.circle(10, 10, 10);
113 c.scale(1.5, 1.5); // makes the circle 1.5 times larger
114 c.scale(.5, .75); // makes the circle half as wide, and 75% as high
118 Sets the attributes of elements directly.
122 1. attributeName string
129 ###### Possible parameters
131 Please refer to the [SVG specification](http://www.w3.org/TR/SVG/) for an explanation of these parameters.
136 * fill-opacity number
151 * stroke-dasharray string [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
152 * stroke-linecap string [“butt”, “square”, “round”, “miter”]
153 * stroke-linejoin string [“butt”, “square”, “round”, “miter”]
154 * stroke-miterlimit number
155 * stroke-opacity number
156 * stroke-width number
164 var c = paper.circle(10, 10, 10);
165 c.attr("fill", "black"); // using strings
166 c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object
170 Linearly changes an attribute from its current value to its specified value in the given amount of milliseconds.
174 1. newAttrs object A parameters object of the animation results.
175 2. ms number The duration of the animation, given in milliseconds.
176 3. callback function \[optional\]
180 var c = paper.circle(10, 10, 10);
181 c.animate({cx: 20, r: 20}, 2000);
185 Returns the dimensions of an element.
189 var c = paper.circle(10, 10, 10);
190 var width = c.getBBox().width;
194 Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
198 var c = paper.circle(10, 10, 10);
203 Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
207 var c = paper.circle(10, 10, 10);
212 Inserts current object before the given one
216 var r = paper.rect(10, 10, 10, 10);
217 var c = paper.circle(10, 10, 10);
222 Inserts current object after the given one
226 var c = paper.circle(10, 10, 10);
227 var r = paper.rect(10, 10, 10, 10);
230 ### Graphic Primitives
238 1. x number X coordinate of the centre
239 2. y number Y coordinate of the centre
244 var c = paper.circle(10, 10, 10);
252 1. x number X coordinate of top left corner
253 2. y number Y coordinate of top left corner
256 5. r number \[optional\] radius for rounded corners, default is 0
261 var c = paper.rect(10, 10, 10, 10);
262 // rectangle with rounded corners
263 var c = paper.rect(10, 10, 100, 50, 10);
271 1. x number X coordinate of the centre
272 2. y number X coordinate of the centre
273 3. rx number Horisontal radius
274 4. ry number Vertical radius
278 var c = paper.ellipse(100, 100, 30, 40);
282 Embeds an image into the SVG/VML canvas.
286 1. src string URI of the source image
287 2. x number X coordinate position
288 3. y number Y coordinate position
289 4. width number Width of the image
290 5. height number Height of the image
294 var c = paper.image("apple.png", 10, 10, 100, 100);
298 Initialises path drawing. Typically, this function returns an empty ‘path’ object and to draw paths you use its built-in methods like ‘lineTo’ and ‘curveTo’. However, you can also specify a path literally by supplying the path data as a second argument.
302 1. params object Attributes for the resulting path as described in the ‘attr’ reference.
303 2. pathString string \[optional\] Path data in [SVG path string format](http://www.w3.org/TR/SVG/paths.html#PathData).
307 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50); // draw a diagonal line
308 var c = paper.path({stroke: "#036"}, "M 10 10 L 50 50"); // same
314 Sets a trigger to count all following units as absolute ones, unless said otherwise. (This is on by default.)
318 var c = paper.path({stroke: "#036"}).absolutely()
319 .moveTo(10, 10).lineTo(50, 50);
323 Sets a trigger to count all following units as relative ones, unless said otherwise.
327 var c = paper.path({stroke: "#036"}).relatively()
328 .moveTo(10, 10).lineTo(50, 50);
332 Moves the drawing point to the given coordinates.
336 1. x number X coordinate
337 2. y number Y coordinate
341 // Begins drawing the path at coordinate 10,10
342 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
346 Draws a straight line to the given coordinates.
350 1. x number X coordinate
351 2. y number Y coordinate
355 // Draws a line starting from 10,10 to 50,50
356 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
360 Draws a curved line to the given coordinates. The line will have horizontal anchors on start and on finish.
370 var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);
374 Draws a bicubic curve to the given coordinates.
387 var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
391 Draws a quadratic curve to the given coordinates.
402 var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
404 #### addRoundedCorner
406 Draws a quarter of a circle from the current drawing point.
411 2. dir string Two-letter directional instruction, as described below.
426 var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");
430 Closes the path being drawn.
434 var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();
438 [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php)
440 Copyright (c) 2008 Dmitry Baranovskiy (http://raphaeljs.com)