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. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.
9 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 JavaScript 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+.
13 Download and include raphael.js into your HTML page, then use it as simply as:
15 // Creates canvas 320 × 200 at 10, 50
16 var paper = Raphael(10, 50, 320, 200);
17 // Creates circle at x = 50, y = 40, with radius 10
18 var circle = paper.circle(50, 40, 10);
19 // Sets the fill attribute of the circle to red (#f00)
20 circle.attr("fill", "#f00");
21 // Sets the stroke attribute of the circle to white (#fff)
22 circle.attr("stroke", "#fff");
30 Function that creates a canvas on which to draw.
34 1. container HTMLElement or string
47 // Creates canvas 320 × 200 at 10, 50
48 var paper = Raphael(10, 50, 320, 200);
49 var paper = Raphael(document.getElementById("notepad"), 320, 200);
50 var paper = Raphael("notepad", 320, 200);
52 ### Element’s generic methods
54 Each object created on the canvas share the same generic methods:
58 Gives you reference to DOM object, so you can assign event handlers or just randomly mess around.
62 var c = paper.circle(10, 10, 10);
63 c.node.onclick = function () { c.attr("fill", "red"); };
67 Rotates element by given degree around its center.
71 1. degree number Degree of rotation (0 – 360°)
72 2. isAbsolute boolean [optional] Will rotation be relative or absolute
76 var c = paper.circle(10, 10, 10);
81 Moves element around the canvas by given dimensions.
85 1. dx number Pixels of translation by X
86 2. dy number Pixels of translation by Y
90 var c = paper.circle(10, 10, 10);
95 Scales element by given amount of times.
104 var c = paper.circle(10, 10, 10);
109 Sets attributes of elements.
117 1. attributeName string
120 ###### Possible parameters
124 * dasharray string [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
126 * fill-opacity number
141 * stroke-linecap string [“butt”, “square”, “round”, “miter”]
142 * stroke-linejoin string [“butt”, “square”, “round”, “miter”]
143 * stroke-miterlimit number
144 * stroke-opacity number
145 * stroke-width number
153 var c = paper.circle(10, 10, 10);
154 c.attr("fill", "black");
155 c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});
159 Linearly changes attribute from current to specified in given amount of milliseconds.
165 3. callback function [optional]
169 var c = paper.circle(10, 10, 10);
170 c.animate({cx: 20, r: 20}, 2000);
174 Returns dimensions of given element.
178 var c = paper.circle(10, 10, 10);
179 var width = c.getBBox().width;
183 Moves element to front in hierarchy.
187 var c = paper.circle(10, 10, 10);
192 Moves element to back in hierarchy.
196 var c = paper.circle(10, 10, 10);
199 ### Graphic Primitives
207 1. x number X coordinate of the centre
208 2. y number Y coordinate of the centre
213 var c = paper.circle(10, 10, 10);
221 1. x number X coordinate of top left corner
222 2. y number Y coordinate of top left corner
225 5. r number [optional] radius for rounded corners, default is 0
230 var c = paper.rect(10, 10, 10, 10);
232 var c = paper.rect(10, 10, 100, 50, 10);
240 1. x number X coordinate of the centre
241 2. y number X coordinate of the centre
242 3. rx number Horisontal radius
243 4. ry number Vertical radius
247 var c = paper.ellipse(100, 100, 30, 40);
251 Embeds an image in SVG/VML area.
263 var c = paper.image("apple.png", 10, 10, 100, 100);
267 Initialise path drawing. In general case this function returns empty path object. To draw path use built in methods like lineTo and curveTo.
271 1. params object Similar to object for attr method
272 2. pathString string [optional] path in SVG path string format. See SVG documentation.
276 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
282 Sets trigger to count all following units as absolute ones, unless said otherwise. [on by default]
286 var c = paper.path({stroke: "#036"}).absolutely()
287 .moveTo(10, 10).lineTo(50, 50);
291 Sets trigger to count all following units as relative ones, unless said otherwise.
295 var c = paper.path({stroke: "#036"}).relatively()
296 .moveTo(10, 10).lineTo(50, 50);
300 Moves drawing point to given coordinates.
309 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
313 Draws straight line to given coordinates.
322 var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
326 Draws curved line to given coordinates. Line will have horizontal anchors on start and on finish.
336 var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);
340 Draws bicubic curve to given coordinates.
353 var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
357 Draws quadratic curve to given coordinates.
368 var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
370 #### addRoundedCorner
372 Draws quarter of circle form current point.
377 2. dir string two letters direction
392 var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");
400 var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();
404 http://www.opensource.org/licenses/mit-license.php
406 Copyright (c) 2008 Dmitry Baranovskiy (http://raphaeljs.com)