2 <!-- Generated with Dr.js -->
3 <html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div class="dr-doc"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li></ol><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
4 <h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4752">➭</a></h3>
5 <div class="dr-method"><p>Creates copy of existing animation object with given delay.</p>
6 <p class="header">Parameters
8 <dl class="dr-parameters"><dt class="dr-param">delay</dt>
9 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
10 <dd class="dr-description">number of ms to pass between animation start and actual animation</dd>
12 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
13 </div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4770">➭</a></h3>
14 <div class="dr-method"><p>Creates copy of existing animation object with given repetition.</p>
15 <p class="header">Parameters
17 <dl class="dr-parameters"><dt class="dr-param">repeat</dt>
18 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
19 <dd class="dr-description">number iterations of animation. For infinite animation pass <code>Infinity</code></dd>
21 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
22 </div><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
23 <h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5029">➭</a></h3>
24 <div class="dr-method"><p>Creates and starts animation for given element.</p>
25 <p class="header">Parameters
27 <dl class="dr-parameters"><dt class="dr-param">params</dt>
28 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
29 <dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
30 <dt class="dr-param">ms</dt>
31 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
32 <dd class="dr-description">number of milliseconds for animation to run</dd>
33 <dt class="dr-param optional">easing</dt>
34 <dd class="dr-optional">optional</dd>
35 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
36 <dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
37 <dt class="dr-param optional">callback</dt>
38 <dd class="dr-optional">optional</dd>
39 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
40 <dd class="dr-description">callback function. Will be called at the end of animation.</dd>
43 <dl class="dr-parameters"><dt class="dr-param">animation</dt>
44 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
45 <dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
47 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
48 </div><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4225">➭</a></h3>
49 <div class="dr-method"><p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">clone of a given element</span></p>
50 </div><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4193">➭</a></h3>
51 <div class="dr-method"><p>Return bounding box for a given element</p>
52 <p class="header">Parameters
54 <dl class="dr-parameters"><dt class="dr-param">isWithoutTransform</dt>
55 <dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
56 <dd class="dr-description">flag, <code>true</code> if you want to have bounding box before transformations. Default is <code>false</code>.</dd>
58 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Bounding box object:</span></p>
59 <pre class="javascript code"><code>{
60 x: <span class="c">//top left corner x,</span>
61 y: <span class="c">//top left corner y,</span>
62 width: <span class="c">//width,</span>
63 height: <span class="c">//height</span>
66 </div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4428">➭</a></h3>
67 <div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.</p>
68 <p class="header">Parameters
70 <dl class="dr-parameters"><dt class="dr-param">length</dt>
71 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
72 <dd class="dr-description"> </dd>
74 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
75 <pre class="javascript code"><code>{
76 x: <span class="c">//x coordinate,</span>
77 y: <span class="c">//y coordinate,</span>
78 alpha: <span class="c">//angle of derivative</span>
81 </div><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4445">➭</a></h3>
82 <div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.</p>
83 <p class="header">Parameters
85 <dl class="dr-parameters"><dt class="dr-param">from</dt>
86 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
87 <dd class="dr-description">position of the start of the segment</dd>
88 <dt class="dr-param">to</dt>
89 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
90 <dd class="dr-description">position of the end of the segment</dd>
92 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
93 </div><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4404">➭</a></h3>
94 <div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.</p>
95 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
96 </div><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4244">➭</a></h3>
97 <div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set." class="dr-link">Paper.set.</a></p>
98 <p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.</p>
99 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set of elements that represents glow</span></p>
100 </div><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2369">➭</a></h3>
101 <div class="dr-method"><p>Adds rotation by given angle around given point to the list oftransformations of the element.</p>
102 <p class="header">Parameters
104 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
105 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
106 <dd class="dr-description">angle in degrees</dd>
107 <dt class="dr-param optional">cx</dt>
108 <dd class="dr-optional">optional</dd>
109 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
110 <dd class="dr-description">x coordinate of the centre of rotation</dd>
111 <dt class="dr-param optional">cy</dt>
112 <dd class="dr-optional">optional</dd>
113 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
114 <dd class="dr-description">y coordinate of the centre of rotation</dd>
116 <p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used as a point of rotation.</p>
117 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
118 </div><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">➭</a></h3>
119 <div class="dr-method"><p>Adds scale by given amount relative to given point to the list oftransformations of the element.</p>
120 <p class="header">Parameters
122 <dl class="dr-parameters"><dt class="dr-param">sx</dt>
123 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
124 <dd class="dr-description">horisontal scale amount</dd>
125 <dt class="dr-param">sy</dt>
126 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
127 <dd class="dr-description">vertical scale amount</dd>
128 <dt class="dr-param optional">cx</dt>
129 <dd class="dr-optional">optional</dd>
130 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
131 <dd class="dr-description">x coordinate of the centre of scale</dd>
132 <dt class="dr-param optional">cy</dt>
133 <dd class="dr-optional">optional</dd>
134 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
135 <dd class="dr-description">y coordinate of the centre of scale</dd>
137 <p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used instead.</p>
138 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
139 </div><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5052">➭</a></h3>
140 <div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.</p>
141 <p class="header">Parameters
143 <dl class="dr-parameters"><dt class="dr-param">anim</dt>
144 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
145 <dd class="dr-description">animation object</dd>
146 <dt class="dr-param">value</dt>
147 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
148 <dd class="dr-description">number of milliseconds from the beginning of the animation</dd>
150 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
151 </div><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5082">➭</a></h3>
152 <div class="dr-method"><p>Gets or sets the status of animation of the element.</p>
153 <p class="header">Parameters
155 <dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
156 <dd class="dr-optional">optional</dd>
157 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
158 <dd class="dr-description">animation object</dd>
159 <dt class="dr-param optional">value</dt>
160 <dd class="dr-optional">optional</dd>
161 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
162 <dd class="dr-description">0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.</dd>
164 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">status</span></p>
166 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified in format:</span></p>
167 <pre class="javascript code"><code>[{
168 anim: <span class="c">// animation object,</span>
169 status: <span class="c">// status</span>
171 anim: <span class="c">// animation object,</span>
172 status: <span class="c">// status</span>
176 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
177 </div><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2468">➭</a></h3>
178 <div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The formatof transformation string is similar to the path string syntax:</p>
179 <pre class="javascript code"><code><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
181 <p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is forscale and <code>m</code> is for matrix.</p>
182 <p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.</p>
183 <p class="header">Parameters
185 <dl class="dr-parameters"><dt class="dr-param optional">tstr</dt>
186 <dd class="dr-optional">optional</dd>
187 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
188 <dd class="dr-description">transformation string</dd>
190 <p>If tstr isn’t specified</p>
191 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">current transformation string</span></p>
193 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
194 </div><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2433">➭</a></h3>
195 <div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.</p>
196 <p class="header">Parameters
198 <dl class="dr-parameters"><dt class="dr-param">dx</dt>
199 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
200 <dd class="dr-description">horisontal shift</dd>
201 <dt class="dr-param">dy</dt>
202 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
203 <dd class="dr-description">vertical shift</dd>
205 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
206 </div><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
207 <h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4065">➭</a></h3>
208 <div class="dr-property"><p>Points to the bottom element on the paper</p>
209 </div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3905">➭</a></h3>
210 <div class="dr-method"><p>Draws a circle.</p>
211 <p class="header">Parameters
213 <dl class="dr-parameters"><dt class="dr-param">x</dt>
214 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
215 <dd class="dr-description">x coordinate of the centre</dd>
216 <dt class="dr-param">y</dt>
217 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
218 <dd class="dr-description">y coordinate of the centre</dd>
219 <dt class="dr-param">r</dt>
220 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
221 <dd class="dr-description">radius</dd>
223 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “circle”</span></p>
224 <p class="header">Usage
226 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
228 </div><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3949">➭</a></h3>
229 <div class="dr-method"><p>Draws an ellipse.</p>
230 <p class="header">Parameters
232 <dl class="dr-parameters"><dt class="dr-param">x</dt>
233 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
234 <dd class="dr-description">x coordinate of the centre</dd>
235 <dt class="dr-param">y</dt>
236 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
237 <dd class="dr-description">y coordinate of the centre</dd>
238 <dt class="dr-param">rx</dt>
239 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
240 <dd class="dr-description">horisontal radius</dd>
241 <dt class="dr-param">ry</dt>
242 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
243 <dd class="dr-description">vertical radius</dd>
245 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
246 <p class="header">Usage
248 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
250 </div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4160">➭</a></h3>
251 <div class="dr-method"><p>Executes given function for each element on the paper</p>
252 <p>If function returns <code>false</code> it will stop loop running.</p>
253 <p class="header">Parameters
255 <dl class="dr-parameters"><dt class="dr-param">callback</dt>
256 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
257 <dd class="dr-description">function to run</dd>
258 <dt class="dr-param">thisArg</dt>
259 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
260 <dd class="dr-description">context object for the callback</dd>
262 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Paper object</span></p>
263 </div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4136">➭</a></h3>
264 <div class="dr-method"><p>Returns you element by it’s internal ID.</p>
265 <p class="header">Parameters
267 <dl class="dr-parameters"><dt class="dr-param">id</dt>
268 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
269 <dd class="dr-description">id</dd>
271 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
272 </div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4100">➭</a></h3>
273 <div class="dr-method"><p>Returns you topmost element under given point.</p>
274 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
275 <p class="header">Parameters
277 <dl class="dr-parameters"><dt class="dr-param">x</dt>
278 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
279 <dd class="dr-description">x coordinate from the top left corner of the window</dd>
280 <dt class="dr-param">y</dt>
281 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
282 <dd class="dr-description">y coordinate from the top left corner of the window</dd>
284 <p class="header">Usage
286 <pre class="javascript code"><code>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
288 </div><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3991">➭</a></h3>
289 <div class="dr-method"><p>Embeds an image into the surface.</p>
290 <p class="header">Parameters
292 <dl class="dr-parameters"><dt class="dr-param">src</dt>
293 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
294 <dd class="dr-description">URI of the source image</dd>
295 <dt class="dr-param">x</dt>
296 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
297 <dd class="dr-description">x coordinate position</dd>
298 <dt class="dr-param">y</dt>
299 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
300 <dd class="dr-description">y coordinate position</dd>
301 <dt class="dr-param">width</dt>
302 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
303 <dd class="dr-description">width of the image</dd>
304 <dt class="dr-param">height</dt>
305 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
306 <dd class="dr-description">height of the image</dd>
308 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “image”</span></p>
309 <p class="header">Usage
311 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
313 </div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3969">➭</a></h3>
314 <div class="dr-method"><p>Creates a path element by given path data string.</p>
315 <p class="header">Parameters
317 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
318 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
319 <dd class="dr-description">path data in SVG path string format.</dd>
321 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
322 Details of a path's data attribute's format are described in the <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG specification</a>.
323 <p class="header">Usage
325 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
326 <span class="c">// draw a diagonal line:</span>
327 <span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
329 </div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4072">➭</a></h3>
330 <div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function</p>
331 </div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3929">➭</a></h3>
332 <div class="dr-method"><p></p>
333 <p>Draws a rectangle.</p>
334 <p class="header">Parameters
336 <dl class="dr-parameters"><dt class="dr-param">x</dt>
337 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
338 <dd class="dr-description">x coordinate of the top left corner</dd>
339 <dt class="dr-param">y</dt>
340 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
341 <dd class="dr-description">y coordinate of the top left corner</dd>
342 <dt class="dr-param">width</dt>
343 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
344 <dd class="dr-description">width</dd>
345 <dt class="dr-param">height</dt>
346 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
347 <dd class="dr-description">height</dd>
348 <dt class="dr-param">r</dt>
349 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
350 <dd class="dr-description"><a href="#optional" class="dr-link">optional</a> radius for rounded corners, default is 0</dd>
352 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “rect”</span></p>
353 <p class="header">Usage
355 <pre class="javascript code"><code><span class="c">// regular rectangle</span>
356 <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
357 <span class="c">// rectangle <b>with</b> rounded corners</span>
358 <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
360 </div><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4029">➭</a></h3>
361 <div class="dr-method"><p>Creates array-like object to keep and operate couple of elements at once.Warning: it doesn’t create any elements for itself in the page.</p>
362 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array-like object that represents set of elements</span></p>
363 <p class="header">Usage
365 <pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
367 paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
368 paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
370 st.attr({fill: <i>"red"</i>});
372 </div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4051">➭</a></h3>
373 <div class="dr-method"><p>If you need to change dimensions of the canvas call this method</p>
374 <p class="header">Parameters
376 <dl class="dr-parameters"><dt class="dr-param">width</dt>
377 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
378 <dd class="dr-description">new width of the canvas</dd>
379 <dt class="dr-param">height</dt>
380 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
381 <dd class="dr-description">new height of the canvas</dd>
383 <p class="header">Usage
385 <pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
387 paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
388 paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
390 st.attr({fill: <i>"red"</i>});
392 </div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4010">➭</a></h3>
393 <div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.</p>
394 <p class="header">Parameters
396 <dl class="dr-parameters"><dt class="dr-param">x</dt>
397 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
398 <dd class="dr-description">x coordinate position</dd>
399 <dt class="dr-param">y</dt>
400 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
401 <dd class="dr-description">y coordinate position</dd>
402 <dt class="dr-param">text</dt>
403 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
404 <dd class="dr-description">The text string to draw</dd>
406 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “text”</span></p>
407 <p class="header">Usage
409 <pre class="javascript code"><code><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
411 </div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4059">➭</a></h3>
412 <div class="dr-property"><p>Points to the topmost element on the paper</p>
413 </div><h2 id="Raphael" class="dr-method">Raphael(…)<a href="#Raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L55">➭</a></h2>
414 <div class="dr-method"><p>Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.</p>
415 <p class="header">Parameters
417 <dl class="dr-parameters"><dt class="dr-param">container</dt>
418 <dd class="dr-type"><em class="dr-type-HTMLElement">HTMLElement</em> <em class="dr-type-string">string</em></dd>
419 <dd class="dr-description">DOM element or it’s id which is going to be a parent for drawing surface</dd>
420 <dt class="dr-param">width</dt>
421 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
422 <dd class="dr-description"> </dd>
423 <dt class="dr-param">height</dt>
424 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
425 <dd class="dr-description"> </dd>
428 <dl class="dr-parameters"><dt class="dr-param">x</dt>
429 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
430 <dd class="dr-description"> </dd>
431 <dt class="dr-param">y</dt>
432 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
433 <dd class="dr-description"> </dd>
434 <dt class="dr-param">width</dt>
435 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
436 <dd class="dr-description"> </dd>
437 <dt class="dr-param">height</dt>
438 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
439 <dd class="dr-description"> </dd>
442 <dl class="dr-parameters"><dt class="dr-param">all</dt>
443 <dd class="dr-type"><em class="dr-type-array">array</em></dd>
444 <dd class="dr-description">(first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, <attributes>})</dd>
447 <dl class="dr-parameters"><dt class="dr-param">onReadyCallback</dt>
448 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
449 <dd class="dr-description">function that is going to be called on DOM ready event. You can also subscribe to this event via Eve’s “DOMLoad” event. In this case method returns <code>undefined</code>.</dd>
451 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper" class="dr-link">Paper</a></span></p>
452 <p class="header">Usage
454 <pre class="javascript code"><code><span class="c">// Each of the following examples create a canvas that is 320px wide by 200px high</span>
455 <span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate</span>
456 <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
457 <span class="c">// Canvas is created at the top left corner of the #notepad element</span>
458 <span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
459 <b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
460 <span class="c">// Same as above</span>
461 <b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
462 <span class="c">// Image dump</span>
463 <b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
465 x: <span class="d">10</span>,
466 y: <span class="d">10</span>,
467 width: <span class="d">25</span>,
468 height: <span class="d">25</span>,
469 stroke: <i>"#f00"</i>
472 x: <span class="d">30</span>,
473 y: <span class="d">40</span>,
477 </div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L298">➭</a></h3>
478 <div class="dr-method"><p>Returns angle between two or three points</p>
479 <p class="header">Parameters
481 <dl class="dr-parameters"><dt class="dr-param">x1</dt>
482 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
483 <dd class="dr-description">x coord of first point</dd>
484 <dt class="dr-param">y1</dt>
485 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
486 <dd class="dr-description">y coord of first point</dd>
487 <dt class="dr-param">x2</dt>
488 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
489 <dd class="dr-description">x coord of second point</dd>
490 <dt class="dr-param">y2</dt>
491 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
492 <dd class="dr-description">y coord of second point</dd>
493 <dt class="dr-param optional">x3</dt>
494 <dd class="dr-optional">optional</dd>
495 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
496 <dd class="dr-description">x coord of third point</dd>
497 <dt class="dr-param optional">y3</dt>
498 <dd class="dr-optional">optional</dd>
499 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
500 <dd class="dr-description">y coord of third point</dd>
502 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
503 </div><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4990">➭</a></h3>
504 <div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.</p>
505 <p class="header">Parameters
507 <dl class="dr-parameters"><dt class="dr-param">params</dt>
508 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
509 <dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
510 <dt class="dr-param">ms</dt>
511 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
512 <dd class="dr-description">number of milliseconds for animation to run</dd>
513 <dt class="dr-param optional">easing</dt>
514 <dd class="dr-optional">optional</dd>
515 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
516 <dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
517 <dt class="dr-param optional">callback</dt>
518 <dd class="dr-optional">optional</dd>
519 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
520 <dd class="dr-description">callback function. Will be called at the end of animation.</dd>
522 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Animation" class="dr-link">Animation</a></span></p>
523 </div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L331">➭</a></h3>
524 <div class="dr-method"><p>Transform angle to degrees</p>
525 <p class="header">Parameters
527 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
528 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
529 <dd class="dr-description">angle in radians</dd>
531 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
532 </div><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4466">➭</a></h3>
533 <div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:</p>
536 <li>“<” or “easeIn” or “ease-in”</li>
537 <li>“>” or “easeOut” or “ease-out”</li>
538 <li>“<>” or “easeInOut” or “ease-in-out”</li>
539 <li>“backIn” or “back-in”</li>
540 <li>“backOut” or “back-out”</li>
544 <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
545 </div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L940">➭</a></h3>
546 <div class="dr-method"><p>Utility methodFind dot coordinates on the given cubic bezier curve at the given t.</p>
547 <p class="header">Parameters
549 <dl class="dr-parameters"><dt class="dr-param">p1x</dt>
550 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
551 <dd class="dr-description">x of the first point of the curve</dd>
552 <dt class="dr-param">p1y</dt>
553 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
554 <dd class="dr-description">y of the first point of the curve</dd>
555 <dt class="dr-param">c1x</dt>
556 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
557 <dd class="dr-description">x of the first anchor of the curve</dd>
558 <dt class="dr-param">c1y</dt>
559 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
560 <dd class="dr-description">y of the first anchor of the curve</dd>
561 <dt class="dr-param">c2x</dt>
562 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
563 <dd class="dr-description">x of the second anchor of the curve</dd>
564 <dt class="dr-param">c2y</dt>
565 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
566 <dd class="dr-description">y of the second anchor of the curve</dd>
567 <dt class="dr-param">p2x</dt>
568 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
569 <dd class="dr-description">x of the second point of the curve</dd>
570 <dt class="dr-param">p2y</dt>
571 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
572 <dd class="dr-description">y of the second point of the curve</dd>
573 <dt class="dr-param">t</dt>
574 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
575 <dd class="dr-description">position on the curve (0..1)</dd>
577 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
578 <pre class="javascript code"><code>{
579 x: <span class="c">// x coordinate of the point,</span>
580 y: <span class="c">// y coordinate of the point,</span>
582 x: <span class="c">// x coordinate of the left anchor,</span>
583 y: <span class="c">// y coordinate of the left anchor</span>
586 x: <span class="c">// x coordinate of the right anchor,</span>
587 y: <span class="c">// y coordinate of the right anchor</span>
590 x: <span class="c">// x coordinate of the start of the curve,</span>
591 y: <span class="c">// y coordinate of the start of the curve</span>
594 x: <span class="c">// x coordinate of the end of the curve,</span>
595 y: <span class="c">// y coordinate of the end of the curve</span>
597 alpha: <span class="c">// angle of the curve derivative at the point.</span>
600 </div><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L262">➭</a></h3>
601 <div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespacesinside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>object before Raphaël instance was created, otherwise it will take no effect.</p>
602 <p class="header">Usage
604 <pre class="javascript code"><code>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
605 <b>return</b> <b>this</b>.path( ... );
607 <span class="c">// or create namespace</span>
608 Raphael.fn.mystuff<span class="s"> = </span>{
609 arrow: <b>function</b> () {…},
610 star: <b>function</b> () {…},
611 <span class="c">// etc…</span>
613 <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
614 <span class="c">// then use it</span>
615 paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
616 paper.mystuff.arrow();
617 paper.mystuff.star();
619 </div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">➭</a></h3>
620 <div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a></p>
621 <p class="header">Parameters
623 <dl class="dr-parameters"><dt class="dr-param optional">value</dt>
624 <dd class="dr-optional">optional</dd>
625 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
626 <dd class="dr-description">brightness, default is <code>0.75</code></dd>
628 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
629 </div><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L820">➭</a></h4>
630 <div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.</p>
631 </div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">➭</a></h3>
632 <div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.</p>
633 <p class="header">Parameters
635 <dl class="dr-parameters"><dt class="dr-param">path</dt>
636 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
637 <dd class="dr-description">SVG path string</dd>
638 <dt class="dr-param">length</dt>
639 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
640 <dd class="dr-description"> </dd>
642 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
643 <pre class="javascript code"><code>{
644 x: <span class="c">//x coordinate,</span>
645 y: <span class="c">//y coordinate,</span>
646 alpha: <span class="c">//angle of derivative</span>
649 </div><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L681">➭</a></h3>
650 <div class="dr-method"><p>Parses colour string as RGB object</p>
651 <p class="header">Parameters
653 <dl class="dr-parameters"><dt class="dr-param">colour</dt>
654 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
655 <dd class="dr-description">colour string in one of formats:</dd>
657 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
658 <pre class="javascript code"><code>{
659 r: <span class="c">// red,</span>
660 g: <span class="c">// green,</span>
661 b: <span class="c">// blue</span>
662 hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
663 error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
666 </div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4390">➭</a></h3>
667 <div class="dr-method"><p>Return subpath of a given path from given length to given length.</p>
668 <p class="header">Parameters
670 <dl class="dr-parameters"><dt class="dr-param">path</dt>
671 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
672 <dd class="dr-description">SVG path string</dd>
673 <dt class="dr-param">from</dt>
674 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
675 <dd class="dr-description">position of the start of the segment</dd>
676 <dt class="dr-param">to</dt>
677 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
678 <dd class="dr-description">position of the end of the segment</dd>
680 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
681 </div><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4356">➭</a></h3>
682 <div class="dr-method"><p>Returns length of the given path in pixels.</p>
683 <p class="header">Parameters
685 <dl class="dr-parameters"><dt class="dr-param">path</dt>
686 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
687 <dd class="dr-description">SVG path string.</dd>
689 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
690 </div><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L763">➭</a></h3>
691 <div class="dr-method"><p>Converts HSB values to hex representation of the colour.</p>
692 <p class="header">Parameters
694 <dl class="dr-parameters"><dt class="dr-param">h</dt>
695 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
696 <dd class="dr-description">hue</dd>
697 <dt class="dr-param">s</dt>
698 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
699 <dd class="dr-description">saturation</dd>
700 <dt class="dr-param">b</dt>
701 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
702 <dd class="dr-description">value or brightness</dd>
704 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
705 </div><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L488">➭</a></h3>
706 <div class="dr-method"><p>Converts HSB values to RGB object.</p>
707 <p class="header">Parameters
709 <dl class="dr-parameters"><dt class="dr-param">h</dt>
710 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
711 <dd class="dr-description">hue</dd>
712 <dt class="dr-param">s</dt>
713 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
714 <dd class="dr-description">saturation</dd>
715 <dt class="dr-param">v</dt>
716 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
717 <dd class="dr-description">value or brightness</dd>
719 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
720 <pre class="javascript code"><code>{
721 r: <span class="c">// red,</span>
722 g: <span class="c">// green,</span>
723 b: <span class="c">// blue</span>
724 hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
727 </div><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L777">➭</a></h3>
728 <div class="dr-method"><p>Converts HSL values to hex representation of the colour.</p>
729 <p class="header">Parameters
731 <dl class="dr-parameters"><dt class="dr-param">h</dt>
732 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
733 <dd class="dr-description">hue</dd>
734 <dt class="dr-param">s</dt>
735 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
736 <dd class="dr-description">saturation</dd>
737 <dt class="dr-param">l</dt>
738 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
739 <dd class="dr-description">luminosity</dd>
741 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
742 </div><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L525">➭</a></h3>
743 <div class="dr-method"><p>Converts HSL values to RGB object.</p>
744 <p class="header">Parameters
746 <dl class="dr-parameters"><dt class="dr-param">h</dt>
747 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
748 <dd class="dr-description">hue</dd>
749 <dt class="dr-param">s</dt>
750 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
751 <dd class="dr-description">saturation</dd>
752 <dt class="dr-param">l</dt>
753 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
754 <dd class="dr-description">luminosity</dd>
756 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
757 <pre class="javascript code"><code>{
758 r: <span class="c">// red,</span>
759 g: <span class="c">// green,</span>
760 b: <span class="c">// blue</span>
761 hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
764 </div><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L273">➭</a></h3>
765 <div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.</p>
766 <p class="header">Parameters
768 <dl class="dr-parameters"><dt class="dr-param">o</dt>
769 <dd class="dr-type"><em class="dr-type-…">…</em></dd>
770 <dd class="dr-description">any object or primitive</dd>
771 <dt class="dr-param">type</dt>
772 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
773 <dd class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</dd>
775 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">is given value is of given type</span></p>
776 </div><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L835">➭</a></h3>
777 <div class="dr-method"><p>Utility methodParses given path string into an array of arrays of path segments.</p>
778 <p class="header">Parameters
780 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
781 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
782 <dd class="dr-description">path string or array of segments (in the last case it will be returned stright away)</dd>
784 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
785 </div><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L878">➭</a></h3>
786 <div class="dr-method"><p>Utility methodParses given path string into an array of transformations.</p>
787 <p class="header">Parameters
789 <dl class="dr-parameters"><dt class="dr-param">TString</dt>
790 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
791 <dd class="dr-description">transform string or array of transformations (in the last case it will be returned stright away)</dd>
793 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of transformations.</span></p>
794 </div><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1659">➭</a></h3>
795 <div class="dr-method"><p>Utility methodConverts path to path where all segments are cubic bezier curves.</p>
796 <p class="header">Parameters
798 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
799 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
800 <dd class="dr-description">path string or array of segments</dd>
802 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
803 </div><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1647">➭</a></h3>
804 <div class="dr-method"><p>Utility methodConverts path to relative form</p>
805 <p class="header">Parameters
807 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
808 <dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
809 <dd class="dr-description">path string or array of segments</dd>
811 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
812 </div><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L319">➭</a></h3>
813 <div class="dr-method"><p>Transform angle to radians</p>
814 <p class="header">Parameters
816 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
817 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
818 <dd class="dr-description">angle in degrees</dd>
820 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in radians.</span></p>
821 </div><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L791">➭</a></h3>
822 <div class="dr-method"><p>Converts RGB values to hex representation of the colour.</p>
823 <p class="header">Parameters
825 <dl class="dr-parameters"><dt class="dr-param">r</dt>
826 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
827 <dd class="dr-description">red</dd>
828 <dt class="dr-param">g</dt>
829 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
830 <dd class="dr-description">green</dd>
831 <dt class="dr-param">b</dt>
832 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
833 <dd class="dr-description">blue</dd>
835 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
836 </div><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L565">➭</a></h3>
837 <div class="dr-method"><p>Converts RGB values to HSB object.</p>
838 <p class="header">Parameters
840 <dl class="dr-parameters"><dt class="dr-param">r</dt>
841 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
842 <dd class="dr-description">red</dd>
843 <dt class="dr-param">g</dt>
844 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
845 <dd class="dr-description">green</dd>
846 <dt class="dr-param">b</dt>
847 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
848 <dd class="dr-description">blue</dd>
850 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSB object in format:</span></p>
851 <pre class="javascript code"><code>{
852 h: <span class="c">// hue,</span>
853 s: <span class="c">// saturation,</span>
854 b: <span class="c">// brightness</span>
857 </div><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L598">➭</a></h3>
858 <div class="dr-method"><p>Converts RGB values to HSL object.</p>
859 <p class="header">Parameters
861 <dl class="dr-parameters"><dt class="dr-param">r</dt>
862 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
863 <dd class="dr-description">red</dd>
864 <dt class="dr-param">g</dt>
865 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
866 <dd class="dr-description">green</dd>
867 <dt class="dr-param">b</dt>
868 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
869 <dd class="dr-description">blue</dd>
871 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSL object in format:</span></p>
872 <pre class="javascript code"><code>{
873 h: <span class="c">// hue,</span>
874 s: <span class="c">// saturation,</span>
875 l: <span class="c">// luminosity</span>
878 </div><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L383">➭</a></h3>
879 <div class="dr-method"><p>Used when you need to draw in <code><iframe></code>. Switched window to the iframe one.</p>
880 <p class="header">Parameters
882 <dl class="dr-parameters"><dt class="dr-param">newwin</dt>
883 <dd class="dr-type"><em class="dr-type-window">window</em></dd>
884 <dd class="dr-description">new window object</dd>
886 </div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">➭</a></h3>
887 <div class="dr-method"><p>Snaps given value to given grid.</p>
888 <p class="header">Parameters
890 <dl class="dr-parameters"><dt class="dr-param">values</dt>
891 <dd class="dr-type"><em class="dr-type-array">array</em> <em class="dr-type-number">number</em></dd>
892 <dd class="dr-description">given array of values or step of the grid</dd>
893 <dt class="dr-param">value</dt>
894 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
895 <dd class="dr-description">value to adjust</dd>
896 <dt class="dr-param optional">tolerance</dt>
897 <dd class="dr-optional">optional</dd>
898 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
899 <dd class="dr-description">tolerance for snapping. Default is <code>10</code>.</dd>
901 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">adjusted value.</span></p>
902 </div><h3 id="Raphael.svg" class="dr-property">Raphael.svg<a href="#Raphael.svg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L226">➭</a></h3>
903 <div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.</p>
904 </div><h3 id="Raphael.type" class="dr-property">Raphael.type<a href="#Raphael.type" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L208">➭</a></h3>
905 <div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.</p>
906 </div><h3 id="Raphael.vml" class="dr-property">Raphael.vml<a href="#Raphael.vml" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L232">➭</a></h3>
907 <div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.</p>
908 </div></div></body></html>