<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>
<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>
</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="text">
+ text
+ </h3>
+ <p>
+ Draws a text 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="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>
<li>
<a href="reference.html#node"><code>node</code></a>
</li>
+ <li>
+ <a href="reference.html#remove"><code>remove</code></a>
+ </li>
+ <li>
+ <a href="reference.html#hide"><code>hide</code></a>
+ </li>
+ <li>
+ <a href="reference.html#show"><code>show</code></a>
+ </li>
<li>
<a href="reference.html#rotate"><code>rotate</code></a>
</li>
<a href="reference.html#attr"><code>attr</code></a>
</li>
<li>
- <a href="reference.html#attr"><code>animate</code></a>
+ <a href="reference.html#animate"><code>animate</code></a>
</li>
<li>
<a href="reference.html#getBBox"><code>getBBox</code></a>
</li>
</ul>
</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">
projects / raphael / blobdiff