<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10); // draw a circle at coordinate 10,10 with radius of 10
c.node.onclick = function () { c.attr("fill", "red"); };</code></pre>
+ <h3 id="remove">
+ remove
+ </h3>
+ <p>
+ Removes element from the DOM. You can’t use it after this method call.
+ </p>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
+c.remove();</code></pre>
+ <h3 id="hide">
+ hide
+ </h3>
+ <p>
+ Makes element invisible.
+ </p>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
+c.hide();</code></pre>
+ <h3 id="show">
+ show
+ </h3>
+ <p>
+ Makes element visible.
+ </p>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
+c.show();</code></pre>
<h3 id="rotate">
rotate
</h3>
<p>
- Rotates the element by the given degree from either its 0,0 corner or its center point.
+ Rotates the element by the given degree from its center point.
</p>
<h4>Parameters</h4>
<ol>
<li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
- <li>isAbsolute <em>boolean</em> [optional] Specifies the rotation point. Use <code>true</code> to rotate the element around its center point. The default, <code>false</code>, rotates the element from its 0,0 coordinate.</li>
+ <li>isAbsolute <em>boolean</em> [optional] Specifies is degree is relative to previous position (<code>false</code>) or is it absolute angle (<code>true</code>)</li>
+ </ol>
+ <p>or</p>
+ <ol>
+ <li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
+ <li>cx <em>number</em> [optional] X coordinate of the origin of rotation</li>
+ <li>cY <em>number</em> [optional] Y coordinate of the origin of rotation</li>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
<ol>
<li>params <em>object</em></li>
</ol>
+ <p>or</p>
+ <ol>
+ <li>attributeName <em>string</em> in this case method returns current value for given attribute name</li>
+ </ol>
+ <p>or</p>
+ <ol>
+ <li>attributeNames <em>array</em> in this case method returns array of current values for given attribute names</li>
+ </ol>
<h4>Possible parameters</h4>
<p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
<ul>
<li>cx <em>number</em></li>
<li>cy <em>number</em></li>
- <li>dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
<li>fill <em>colour</em></li>
<li>fill-opacity <em>number</em></li>
<li>font <em>string</em></li>
<li>font-family <em>string</em></li>
<li>font-size <em>number</em></li>
<li>font-weight <em>string</em></li>
- <li>gradient <em>object</em></li>
+ <li>gradient <em>object|string</em> "‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"</li>
<li>height <em>number</em></li>
<li>opacity <em>number</em></li>
<li>path <em>pathString</em></li>
<li>rx <em>number</em></li>
<li>ry <em>number</em></li>
<li>scale <em>CSV</em></li>
+ <li>src <em>string</em> (URL)</li>
<li>stroke <em>colour</em></li>
+ <li>stroke-dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
<li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
<li>stroke-linejoin <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
<li>stroke-miterlimit <em>number</em></li>
</p>
<h4>Parameters</h4>
<ol>
- <li>newAttrs <em>object</em> A parameters object of the animation results.</li>
+ <li>newAttrs <em>object</em> A parameters object of the animation results. (Not all attributes can be animated.)</li>
<li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
<li>callback <em>function</em> [optional]</li>
</ol>
+ <h4>Attributes that can be animated</h4>
+ <p>The <code>newAttrs</code> parameter accepts an object whose properties are the attributes to animate. However, not all attributes listed in the <code>attr</code> method reference can be animated. The following is a list of those properties that can be animated:</p>
+ <ul>
+ <li>cx <em>number</em></li>
+ <li>cy <em>number</em></li>
+ <li>fill <em>colour</em></li>
+ <li>fill-opacity <em>number</em></li>
+ <li>font-size <em>number</em></li>
+ <li>height <em>number</em></li>
+ <li>opacity <em>number</em></li>
+ <li>path <em>pathString</em></li>
+ <li>r <em>number</em></li>
+ <li>rotation <em>number</em></li>
+ <li>rx <em>number</em></li>
+ <li>ry <em>number</em></li>
+ <li>scale <em>CSV</em></li>
+ <li>stroke <em>colour</em></li>
+ <li>stroke-opacity <em>number</em></li>
+ <li>stroke-width <em>number</em></li>
+ <li>translation <em>CSV</em></li>
+ <li>width <em>number</em></li>
+ <li>x <em>number</em></li>
+ <li>y <em>number</em></li>
+ </ul>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
<code>c.animate({cx: 20, r: 20}, 2000);</code></pre>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
+ <h3 id="set">
+ set
+ </h3>
+ <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>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var st = paper.set();</code>
+<code>st.push(paper.circle(10, 10, 5));</code>
+<code>st.push(paper.circle(30, 10, 5));</code>
+<code>st.attr({fill: "red"});</code></pre>
+ <h3 id="text">
+ text
+ </h3>
+ <p>
+ Draws a text string. If you need line breaks, put “\n” in the string.
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>x <em>number</em> X coordinate position.</li>
+ <li>y <em>number</em> Y coordinate position.</li>
+ <li>text <em>string</em> The text string to draw.</li>
+ </ol>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var t = paper.text(10, 10, "Look mom, I'm scalable!");</code></pre>
<h3 id="path">
path
</h3>
</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
+ <h3 id="setSize">
+ setSize
+ </h3>
+ <p>
+ If you need to change dimensions of the canvas call this method
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>width <em>number</em> new width of the canvas</li>
+ <li>height <em>number</em> new height of the canvas</li>
+ </ol>
+ <h3 id="setWindow">
+ setWindow
+ </h3>
+ <p>
+ Should be called before main Raphael method. Sets which window should be used for drawing. Default is the current one. You need to use it if you want to draw inside <code>iframe</code>
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>window <em>object</em></li>
+ </ol>
+ <h3 id="getColor">
+ getColor
+ </h3>
+ <p>
+ Returns a colour object for the next colour in spectrum
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>value <em>number</em> brightness [optional]</li>
+ </ol>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var c = paper.path({stroke: Raphael.getColor()}, "M10,10L100,100")</code></pre>
+ <h3 id="getColor-reset">
+ getColor.reset
+ </h3>
+ <p>
+ Resets getColor function, so it will start from the beginning
+ </p>
</div>
<div id="column-2">
<h2>
</h2>
<ul id="contents">
<li>
- <a href="reference.html#Raphael"><code>Raphael</code></a>
+ <a href="#Raphael"><code>Raphael</code></a>
+ </li>
+ <li>
+ <a href="#node"><code>node</code></a>
+ </li>
+ <li>
+ <a href="#remove"><code>remove</code></a>
+ </li>
+ <li>
+ <a href="#hide"><code>hide</code></a>
</li>
<li>
- <a href="reference.html#node"><code>node</code></a>
+ <a href="#show"><code>show</code></a>
</li>
<li>
- <a href="reference.html#rotate"><code>rotate</code></a>
+ <a href="#rotate"><code>rotate</code></a>
</li>
<li>
- <a href="reference.html#translate"><code>translate</code></a>
+ <a href="#translate"><code>translate</code></a>
</li>
<li>
- <a href="reference.html#scale"><code>scale</code></a>
+ <a href="#scale"><code>scale</code></a>
</li>
<li>
- <a href="reference.html#attr"><code>attr</code></a>
+ <a href="#attr"><code>attr</code></a>
</li>
<li>
- <a href="reference.html#attr"><code>animate</code></a>
+ <a href="#animate"><code>animate</code></a>
</li>
<li>
- <a href="reference.html#getBBox"><code>getBBox</code></a>
+ <a href="#getBBox"><code>getBBox</code></a>
</li>
<li>
- <a href="reference.html#toFront"><code>toFront</code></a>
+ <a href="#toFront"><code>toFront</code></a>
</li>
<li>
- <a href="reference.html#toBack"><code>toBack</code></a>
+ <a href="#toBack"><code>toBack</code></a>
</li>
<li>
- <a href="reference.html#circle"><code>circle</code></a>
+ <a href="#circle"><code>circle</code></a>
</li>
<li>
- <a href="reference.html#rect"><code>rect</code></a>
+ <a href="#rect"><code>rect</code></a>
</li>
<li>
- <a href="reference.html#ellipse"><code>ellipse</code></a>
+ <a href="#ellipse"><code>ellipse</code></a>
</li>
<li>
- <a href="reference.html#image"><code>image</code></a>
+ <a href="#image"><code>image</code></a>
</li>
<li>
- <a href="reference.html#path"><code>path</code></a>
+ <a href="#set"><code>set</code></a>
+ </li>
+ <li>
+ <a href="#text"><code>text</code></a>
+ </li>
+ <li>
+ <a href="#path"><code>path</code></a>
<ul>
<li>
- <a href="reference.html#absolutely"><code>absolutely</code></a>
+ <a href="#absolutely"><code>absolutely</code></a>
</li>
<li>
- <a href="reference.html#relatively"><code>relatively</code></a>
+ <a href="#relatively"><code>relatively</code></a>
</li>
<li>
- <a href="reference.html#moveTo"><code>moveTo</code></a>
+ <a href="#moveTo"><code>moveTo</code></a>
</li>
<li>
- <a href="reference.html#lineTo"><code>lineTo</code></a>
+ <a href="#lineTo"><code>lineTo</code></a>
</li>
<li>
- <a href="reference.html#cplineTo"><code>cplineTo</code></a>
+ <a href="#cplineTo"><code>cplineTo</code></a>
</li>
<li>
- <a href="reference.html#curveTo"><code>curveTo</code></a>
+ <a href="#curveTo"><code>curveTo</code></a>
</li>
<li>
- <a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
+ <a href="#qcurveTo"><code>qcurveTo</code></a>
</li>
<li>
- <a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
+ <a href="#addRoundedCorner"><code>addRoundedCorner</code></a>
</li>
<li>
- <a href="reference.html#andClose"><code>andClose</code></a>
+ <a href="#andClose"><code>andClose</code></a>
</li>
</ul>
</li>
+ <li>
+ <a href="#setSize"><code>setSize</code></a>
+ </li>
+ <li>
+ <a href="#setWindow"><code>setWindow</code></a>
+ </li>
+ <li>
+ <a href="#getColor"><code>getColor</code></a>
+ </li>
+ <li>
+ <a href="#getColor-reset"><code>getColor.reset</code></a>
+ </li>
</ul>
</div>
<div id="footer">
<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>
</h3>
<h3 id="font">
- A font by <a href="http://www.exljbris.nl">Jos Buivenga</a> | Logo by <a href="http://wasabicube.com/">Wasabicube</a>
+ Font by <a href="http://www.exljbris.nl">Jos Buivenga</a> · Logo by <a href="http://wasabicube.com/">Wasabicube</a> ·
+ Work at this project started as 20% time at <a href="http://www.atlassian.com/" title="Atlassian — Software to Track, Test & Collaborate, from Enterprises to Open Source Projects.">Atlassian</a>
</h3>
</div>
</div>
projects / raphael / blobdiff