1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>Raphaël Reference</title>
7 <meta name="author" content="Dmitry Baranovskiy">
8 <meta name="description" content="Vector Graphics JavaScript™ Library">
9 <link rel="stylesheet" href="raphael.css" type="text/css" charset="utf-8" media="screen,projection">
10 <link rel="stylesheet" type="text/css" media="print" href="/dmitry-print.css">
11 <link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
12 <link rel="apple-touch-icon" href="/favicon.png">
13 <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
14 <script src="../dmitry.js" type="text/javascript" charset="utf-8"></script>
16 <body class="raphael" id="raphael.dmitry.baranovskiy.com">
18 <a href="http://twitter.com/statuses/user_timeline/17180567.atom" id="rss" name="rss">rss</a>
20 Raphaël—JavaScript Library
27 <h2>Main Function</h2>
32 Function that creates canvas for future drawing.
36 <li>container <em>HTMLElement</em> or <em>string</em></li>
37 <li>width <em>number</em></li>
38 <li>height <em>number</em></li>
42 <li>x <em>number</em></li>
43 <li>y <em>number</em></li>
44 <li>width <em>number</em></li>
45 <li>height <em>number</em></li>
48 <pre class="javascript code"><code>
49 // Creates canvas 320 × 200 at 10, 50</code>
50 <code>var paper = Raphael(10, 50, 320, 200);</code>
51 <code>var paper = Raphael(document.getElementById("notepad"), 320, 200);</code>
52 <code>var paper = Raphael("notepad", 320, 200);</code></pre>
54 Element’s generic methods
57 Each object created on the canvas share the same generic methods:
63 Gives you reference to DOM object, so you can assign event handlers or just randomly mess around.
66 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
67 <code>c.node.onclick = function () { c.attr("fill", "red"); };</code></pre>
72 Rotates element by given degree around its center.
76 <li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
77 <li>isAbsolute <em>boolean</em> [optional] Will rotation be relative or absolute</li>
80 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
81 <code>c.rotate(45);</code></pre>
86 Moves element around the canvas by given dimensions.
90 <li>dx <em>number</em> Pixels of translation by X</li>
91 <li>dy <em>number</em> Pixels of translation by Y</li>
94 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
95 <code>c.translate(10, 10);</code></pre>
100 Scales element by given amount of times.
104 <li>Xtimes <em>number</em></li>
105 <li>Ytimes <em>number</em></li>
108 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
109 <code>c.scale(1.5, 1.5);</code></pre>
114 Sets attributes of elements.
118 <li>params <em>object</em></li>
122 <li>attributeName <em>string</em></li>
123 <li>value <em>string</em></li>
125 <h4>Possible parameters</h4>
127 <li>cx <em>number</em></li>
128 <li>cy <em>number</em></li>
129 <li>dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
130 <li>fill <em>colour</em></li>
131 <li>fill-opacity <em>number</em></li>
132 <li>font <em>string</em></li>
133 <li>font-family <em>string</em></li>
134 <li>font-size <em>number</em></li>
135 <li>font-weight <em>string</em></li>
136 <li>gradient <em>object</em></li>
137 <li>height <em>number</em></li>
138 <li>opacity <em>number</em></li>
139 <li>path <em>pathString</em></li>
140 <li>r <em>number</em></li>
141 <li>rotation <em>number</em></li>
142 <li>rx <em>number</em></li>
143 <li>ry <em>number</em></li>
144 <li>scale <em>CSV</em></li>
145 <li>stroke <em>colour</em></li>
146 <li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
147 <li>stroke-linejoin <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
148 <li>stroke-miterlimit <em>number</em></li>
149 <li>stroke-opacity <em>number</em></li>
150 <li>stroke-width <em>number</em></li>
151 <li>translation <em>CSV</em></li>
152 <li>width <em>number</em></li>
153 <li>x <em>number</em></li>
154 <li>y <em>number</em></li>
157 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
158 <code>c.attr("fill", "black");</code>
159 <code>c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});</code></pre>
164 Linearly changes attribute from current to specified in given amount of milliseconds.
168 <li>newAttrs <em>object</em></li>
169 <li>ms <em>number</em></li>
170 <li>callback <em>function</em> [optional]</li>
173 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
174 <code>c.animate({cx: 20, r: 20}, 2000);</code></pre>
179 Returns dimensions of given element.
182 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
183 <code>var width = c.getBBox().width;</code></pre>
188 Moves element to front in hierarchy.
191 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
192 <code>c.toFront();</code></pre>
197 Moves element to back in hierarchy.
200 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
201 <code>c.toBack();</code></pre>
202 <h2>Graphic Primitives</h2>
211 <li>x <em>number</em> X coordinate of the centre</li>
212 <li>y <em>number</em> Y coordinate of the centre</li>
213 <li>r <em>number</em> radius</li>
216 <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code></pre>
225 <li>x <em>number</em> X coordinate of top left corner</li>
226 <li>y <em>number</em> Y coordinate of top left corner</li>
227 <li>width <em>number</em></li>
228 <li>height <em>number</em></li>
229 <li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
232 <pre class="javascript code"><code>// regular rectangle</code>
233 <code>var c = paper.rect(10, 10, 10, 10);</code>
234 <code>// rounded rectangle</code>
235 <code>var c = paper.rect(10, 10, 100, 50, 10);</code></pre>
244 <li>x <em>number</em> X coordinate of the centre</li>
245 <li>y <em>number</em> X coordinate of the centre</li>
246 <li>rx <em>number</em> Horisontal radius</li>
247 <li>ry <em>number</em> Vertical radius</li>
250 <pre class="javascript code"><code>var c = paper.ellipse(100, 100, 30, 40);</code></pre>
255 Embeds an image in SVG/VML area.
259 <li>src <em>string</em></li>
260 <li>x <em>number</em></li>
261 <li>y <em>number</em></li>
262 <li>width <em>number</em></li>
263 <li>height <em>number</em></li>
266 <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
271 Initialise path drawing. In general case this function returns empty path object. To draw path use built in methods like <code>lineTo</code> and <code>curveTo</code>.
275 <li>params <em>object</em> Similar to object for <code><a href="#attr">attr</a></code> method</li>
276 <li>pathString <em>string</em> [optional] path in SVG path string format. See SVG documentation.</li>
279 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
280 <h2>Path Methods</h2>
285 Sets trigger to count all following units as absolute ones, unless said otherwise. [<em>on by default</em>]
288 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).absolutely()
289 .moveTo(10, 10).lineTo(50, 50);</code></pre>
294 Sets trigger to count all following units as relative ones, unless said otherwise.
297 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).relatively()
298 .moveTo(10, 10).lineTo(50, 50);</code></pre>
303 Moves drawing point to given coordinates.
307 <li>x <em>number</em></li>
308 <li>y <em>number</em></li>
311 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
316 Draws straight line to given coordinates.
320 <li>x <em>number</em></li>
321 <li>y <em>number</em></li>
324 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
329 Draws curved line to given coordinates. Line will have horizontal anchors on start and on finish.
333 <li>x <em>number</em></li>
334 <li>y <em>number</em></li>
335 <li>width <em>number</em></li>
338 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);</code></pre>
343 Draws bicubic curve to given coordinates.
347 <li>x1 <em>number</em></li>
348 <li>y1 <em>number</em></li>
349 <li>x2 <em>number</em></li>
350 <li>y2 <em>number</em></li>
351 <li>x3 <em>number</em></li>
352 <li>y3 <em>number</em></li>
355 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
360 Draws quadratic curve to given coordinates.
364 <li>x1 <em>number</em></li>
365 <li>y1 <em>number</em></li>
366 <li>x2 <em>number</em></li>
367 <li>y2 <em>number</em></li>
370 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
371 <h3 id="addRoundedCorner">
375 Draws quarter of circle form current point.
379 <li>r <em>number</em></li>
380 <li>dir <em>string</em> two letters direction</li>
382 <h4>Possible dir values</h4>
402 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");</code></pre>
410 <pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
414 <a href="index.html">Home</a>
421 <a href="reference.html#Raphael"><code>Raphael</code></a>
424 <a href="reference.html#node"><code>node</code></a>
427 <a href="reference.html#rotate"><code>rotate</code></a>
430 <a href="reference.html#translate"><code>translate</code></a>
433 <a href="reference.html#scale"><code>scale</code></a>
436 <a href="reference.html#attr"><code>attr</code></a>
439 <a href="reference.html#attr"><code>animate</code></a>
442 <a href="reference.html#getBBox"><code>getBBox</code></a>
445 <a href="reference.html#toFront"><code>toFront</code></a>
448 <a href="reference.html#toBack"><code>toBack</code></a>
451 <a href="reference.html#circle"><code>circle</code></a>
454 <a href="reference.html#rect"><code>rect</code></a>
457 <a href="reference.html#ellipse"><code>ellipse</code></a>
460 <a href="reference.html#image"><code>image</code></a>
463 <a href="reference.html#path"><code>path</code></a>
466 <a href="reference.html#absolutely"><code>absolutely</code></a>
469 <a href="reference.html#relatively"><code>relatively</code></a>
472 <a href="reference.html#moveTo"><code>moveTo</code></a>
475 <a href="reference.html#lineTo"><code>lineTo</code></a>
478 <a href="reference.html#cplineTo"><code>cplineTo</code></a>
481 <a href="reference.html#curveTo"><code>curveTo</code></a>
484 <a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
487 <a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
490 <a href="reference.html#andClose"><code>andClose</code></a>
498 <a href="http://creativecommons.org/licenses/by-sa/3.0/" title="Creative Commons Attribution-ShareAlike 3.0 Unported" rel="license">Some Rights Reserved</a> by <a href="http://dmitry.baranovskiy.com/">Dmitry Baranovskiy</a>
501 A font by <a href="http://www.exljbris.nl">Jos Buivenga</a> | Logo by <a href="http://wasabicube.com/">Wasabicube</a>
507 <script type="text/javascript">
508 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
509 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
511 <script type="text/javascript">
512 var pageTracker = _gat._getTracker("UA-616618-3");
513 pageTracker._trackPageview();