652 lines
34 KiB
HTML
652 lines
34 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
"http://www.w3.org/TR/html4/strict.dtd">
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<title>Raphaël Reference</title>
|
||
<meta name="author" content="Dmitry Baranovskiy">
|
||
<meta name="description" content="Vector Graphics JavaScript™ Library">
|
||
<link rel="stylesheet" href="raphael.css" type="text/css" charset="utf-8" media="screen,projection">
|
||
<link rel="stylesheet" type="text/css" media="print" href="/dmitry-print.css">
|
||
<link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
|
||
<link rel="apple-touch-icon" href="/favicon.png">
|
||
<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="../dmitry.js" type="text/javascript" charset="utf-8"></script>
|
||
</head>
|
||
<body class="raphael" id="raphael.dmitry.baranovskiy.com">
|
||
<div id="header">
|
||
<a href="http://twitter.com/statuses/user_timeline/17180567.atom" id="rss" name="rss">rss</a>
|
||
<h1>
|
||
Raphaël—JavaScript Library
|
||
</h1>
|
||
</div>
|
||
<div id="content">
|
||
<div>
|
||
<div>
|
||
<div id="column-1">
|
||
<h2>Main Function</h2>
|
||
<h3 id="Raphael">
|
||
Raphael
|
||
</h3>
|
||
<p>
|
||
Creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>container <em>HTMLElement</em> or <em>string</em></li>
|
||
<li>width <em>number</em></li>
|
||
<li>height <em>number</em></li>
|
||
</ol>
|
||
<p>or</p>
|
||
<ol>
|
||
<li>x <em>number</em></li>
|
||
<li>y <em>number</em></li>
|
||
<li>width <em>number</em></li>
|
||
<li>height <em>number</em></li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>// Each of the following examples create a canvas that is 320px wide by 200px high
|
||
// Canvas is created at the viewport's 10,50 coordinate
|
||
var paper = Raphael(10, 50, 320, 200);
|
||
// Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
|
||
var paper = Raphael(document.getElementById("notepad"), 320, 200);
|
||
// Same as above
|
||
var paper = Raphael("notepad", 320, 200);</code></pre>
|
||
<h2 id="Element">
|
||
Element’s generic methods
|
||
</h2>
|
||
<p>
|
||
Each object created on the canvas shares these same generic methods:
|
||
</p>
|
||
<h3 id="node">
|
||
node
|
||
</h3>
|
||
<p>
|
||
Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
|
||
</p>
|
||
<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 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 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);
|
||
c.rotate(45); // rotation is relative
|
||
c.rotate(45, true); // rotation is absolute</code></pre>
|
||
<h3 id="translate">
|
||
translate
|
||
</h3>
|
||
<p>
|
||
Moves the element around the canvas by the given distances.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>dx <em>number</em> Pixels of translation by X axis</li>
|
||
<li>dy <em>number</em> Pixels of translation by Y axis</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
|
||
c.translate(10, 10); // moves the circle down the canvas, in a diagonal line</code></pre>
|
||
<h3 id="scale">
|
||
scale
|
||
</h3>
|
||
<p>
|
||
Resizes the element by the given multiplier.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>Xtimes <em>number</em> Amount to scale horizontally</li>
|
||
<li>Ytimes <em>number</em> Amount to scale vertically</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
|
||
c.scale(1.5, 1.5); // makes the circle 1.5 times larger
|
||
c.scale(.5, .75); // makes the circle half as wide, and 75% as high</code></pre>
|
||
<h3 id="attr">
|
||
attr
|
||
</h3>
|
||
<p>
|
||
Sets the attributes of elements directly.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>attributeName <em>string</em></li>
|
||
<li>value <em>string</em></li>
|
||
</ol>
|
||
<p>or</p>
|
||
<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>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>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-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>
|
||
<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);
|
||
c.attr("fill", "black"); // using strings
|
||
c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object</code></pre>
|
||
<h3 id="animate">
|
||
animate
|
||
</h3>
|
||
<p>
|
||
Linearly changes an attribute from its current value to its specified value in the given amount of milliseconds.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<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>
|
||
<h3 id="getBBox">
|
||
getBBox
|
||
</h3>
|
||
<p>
|
||
Returns the dimensions of an element.
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
|
||
<code>var width = c.getBBox().width;</code></pre>
|
||
<h3 id="toFront">
|
||
toFront
|
||
</h3>
|
||
<p>
|
||
Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
|
||
<code>c.toFront();</code></pre>
|
||
<h3 id="toBack">
|
||
toBack
|
||
</h3>
|
||
<p>
|
||
Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
|
||
<code>c.toBack();</code></pre>
|
||
<h3 id="insertBefore">
|
||
insertBefore
|
||
</h3>
|
||
<p>
|
||
Inserts current object before the given one.
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
|
||
<code>var c = paper.circle(10, 10, 10);</code>
|
||
<code>c.insertBefore(r);</code></pre>
|
||
<h3 id="insertAfter">
|
||
insertAfter
|
||
</h3>
|
||
<p>
|
||
Inserts current object after the given one
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
|
||
<code>var c = paper.circle(10, 10, 10);</code>
|
||
<code>r.insertAfter(c);</code></pre>
|
||
<h2>Graphic Primitives</h2>
|
||
<h3 id="circle">
|
||
circle
|
||
</h3>
|
||
<p>
|
||
Draws a circle.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x <em>number</em> X coordinate of the centre</li>
|
||
<li>y <em>number</em> Y coordinate of the centre</li>
|
||
<li>r <em>number</em> radius</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code></pre>
|
||
<h3 id="rect">
|
||
rect
|
||
</h3>
|
||
<p>
|
||
Draws a rectangle.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x <em>number</em> X coordinate of top left corner</li>
|
||
<li>y <em>number</em> Y coordinate of top left corner</li>
|
||
<li>width <em>number</em></li>
|
||
<li>height <em>number</em></li>
|
||
<li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>// regular rectangle</code>
|
||
<code>var c = paper.rect(10, 10, 10, 10);</code>
|
||
<code>// rectangle with rounded corners</code>
|
||
<code>var c = paper.rect(10, 10, 100, 50, 10);</code></pre>
|
||
<h3 id="ellipse">
|
||
ellipse
|
||
</h3>
|
||
<p>
|
||
Draws an ellipse.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x <em>number</em> X coordinate of the centre</li>
|
||
<li>y <em>number</em> X coordinate of the centre</li>
|
||
<li>rx <em>number</em> Horisontal radius</li>
|
||
<li>ry <em>number</em> Vertical radius</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.ellipse(100, 100, 30, 40);</code></pre>
|
||
<h3 id="image">
|
||
image
|
||
</h3>
|
||
<p>
|
||
Embeds an image into the SVG/VML canvas.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>src <em>string</em> URI of the source image</li>
|
||
<li>x <em>number</em> X coordinate position</li>
|
||
<li>y <em>number</em> Y coordinate position</li>
|
||
<li>width <em>number</em> Width of the image</li>
|
||
<li>height <em>number</em> Height of the image</li>
|
||
</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>
|
||
Initialises path drawing. Typically, this function returns an empty <code>path</code> object and to draw paths you use its built-in methods like <code>lineTo</code> and <code>curveTo</code>. However, you can also specify a path literally by supplying the path data as a second argument.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>params <em>object</em> Attributes for the resulting path as described in the <code><a href="#attr">attr</a></code> reference.</li>
|
||
<li>pathString <em>string</em> [optional] Path data in <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50); // draw a diagonal line
|
||
var c = paper.path({stroke: "#036"}, "M 10 10 L 50 50"); // same</code></pre>
|
||
<h2>Path Methods</h2>
|
||
<h3 id="absolutely">
|
||
absolutely
|
||
</h3>
|
||
<p>
|
||
Sets a trigger to count all following units as absolute ones, unless said otherwise. (This is on by default.)
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).absolutely()
|
||
.moveTo(10, 10).lineTo(50, 50);</code></pre>
|
||
<h3 id="relatively">
|
||
relatively
|
||
</h3>
|
||
<p>
|
||
Sets a trigger to count all following units as relative ones, unless said otherwise.
|
||
</p>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).relatively()
|
||
.moveTo(10, 10).lineTo(50, 50);</code></pre>
|
||
<h3 id="moveTo">
|
||
moveTo
|
||
</h3>
|
||
<p>
|
||
Moves the drawing point to the given coordinates.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x <em>number</em> X coordinate</li>
|
||
<li>y <em>number</em> Y coordinate</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>// Begins drawing the path at coordinate 10,10
|
||
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
|
||
<h3 id="lineTo">
|
||
lineTo
|
||
</h3>
|
||
<p>
|
||
Draws a straight line to the given coordinates.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x <em>number</em> X coordinate</li>
|
||
<li>y <em>number</em> Y coordinate</li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>// Draws a line starting from 10,10 to 50,50
|
||
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
|
||
<h3 id="cplineTo">
|
||
cplineTo
|
||
</h3>
|
||
<p>
|
||
Draws a curved line to the given coordinates. The line will have horizontal anchors on start and on finish.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x <em>number</em></li>
|
||
<li>y <em>number</em></li>
|
||
<li>width <em>number</em></li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);</code></pre>
|
||
<h3 id="curveTo">
|
||
curveTo
|
||
</h3>
|
||
<p>
|
||
Draws a bicubic curve to the given coordinates.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x1 <em>number</em></li>
|
||
<li>y1 <em>number</em></li>
|
||
<li>x2 <em>number</em></li>
|
||
<li>y2 <em>number</em></li>
|
||
<li>x3 <em>number</em></li>
|
||
<li>y3 <em>number</em></li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
|
||
<h3 id="qcurveTo">
|
||
qcurveTo
|
||
</h3>
|
||
<p>
|
||
Draws a quadratic curve to the given coordinates.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>x1 <em>number</em></li>
|
||
<li>y1 <em>number</em></li>
|
||
<li>x2 <em>number</em></li>
|
||
<li>y2 <em>number</em></li>
|
||
</ol>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);</code></pre>
|
||
<h3 id="addRoundedCorner">
|
||
addRoundedCorner
|
||
</h3>
|
||
<p>
|
||
Draws a quarter of a circle from the current drawing point.
|
||
</p>
|
||
<h4>Parameters</h4>
|
||
<ol>
|
||
<li>r <em>number</em></li>
|
||
<li>dir <em>string</em> Two-letter directional instruction, as described below.</li>
|
||
</ol>
|
||
<h4>Possible <code>dir</code> values</h4>
|
||
<dl>
|
||
<dt>lu</dt>
|
||
<dd>left up</dd>
|
||
<dt>ld</dt>
|
||
<dd>left down</dd>
|
||
<dt>ru</dt>
|
||
<dd>right up</dd>
|
||
<dt>rd</dt>
|
||
<dd>right down</dd>
|
||
<dt>ur</dt>
|
||
<dd>up right</dd>
|
||
<dt>ul</dt>
|
||
<dd>up left</dd>
|
||
<dt>dr</dt>
|
||
<dd>down right</dd>
|
||
<dt>dl</dt>
|
||
<dd>down left</dd>
|
||
</dl>
|
||
<h4>Usage</h4>
|
||
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");</code></pre>
|
||
<h3 id="andClose">
|
||
andClose
|
||
</h3>
|
||
<p>
|
||
Closes the path being drawn.
|
||
</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>
|
||
<a href="index.html">Home</a>
|
||
</h2>
|
||
<h2>
|
||
Contents
|
||
</h2>
|
||
<ul id="contents">
|
||
<li>
|
||
<a href="reference.html#Raphael"><code>Raphael</code></a>
|
||
</li>
|
||
<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>
|
||
<li>
|
||
<a href="reference.html#translate"><code>translate</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#scale"><code>scale</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#attr"><code>attr</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#animate"><code>animate</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#getBBox"><code>getBBox</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#toFront"><code>toFront</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#toBack"><code>toBack</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#circle"><code>circle</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#rect"><code>rect</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#ellipse"><code>ellipse</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#image"><code>image</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#path"><code>path</code></a>
|
||
<ul>
|
||
<li>
|
||
<a href="reference.html#absolutely"><code>absolutely</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#relatively"><code>relatively</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#moveTo"><code>moveTo</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#lineTo"><code>lineTo</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#cplineTo"><code>cplineTo</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#curveTo"><code>curveTo</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
|
||
</li>
|
||
<li>
|
||
<a href="reference.html#andClose"><code>andClose</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">
|
||
<h3 id="copyright">
|
||
<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">
|
||
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>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||
</script>
|
||
<script type="text/javascript">
|
||
var pageTracker = _gat._getTracker("UA-616618-3");
|
||
pageTracker._trackPageview();
|
||
</script>
|
||
</body>
|
||
</html>
|