-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
<html lang="en">
<head>
<title>Raphaël Reference</title>
<meta http-equiv="content-language" content="en">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta charset="utf-8">
<meta name="author" content="Dmitry Baranovskiy">
<meta name="description" content="Vector Graphics JavaScript Library">
<meta name="keywords" content="JavaScript Library, Raphael, SVG, VML">
<meta name="viewport" content="width=450; user-scalable=no">
+ <link rel="apple-touch-icon-precomposed" href="/Raphael.png"/>
<link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
- <link rel="stylesheet" href="raphael.css" type="text/css" charset="utf-8" media="screen,projection">
- <link rel="stylesheet" type="text/css" media="print" href="print.css">
+ <link rel="stylesheet" href="site.css" type="text/css">
<link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
- <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet">
- <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
- <script src="museo.js" type="text/javascript" charset="utf-8"></script>
-
-
</head>
<body class="raphael" id="reference">
<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>
+ <h1><span> </span>Raphaël—JavaScript Library</h1>
</div>
<div id="content">
- <div>
- <div>
+ <div id="top"> </div>
<div id="column-1">
<h2>Main Function</h2>
<h3 id="Raphael">
<pre class="javascript code"><code>var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90</code></pre>
+ <h3 id="clear">
+ clear
+ </h3>
+ <p>
+ Clears the canvas, i.e. removes all the elements.
+ </p>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var c = paper.path("M10 10L90 90");
+paper.clear();</code></pre>
<h2 id="Element">
Element’s generic methods
</h2>
<li>#•••••• — full length HTML colour: (“<samp>#000000</samp>”, “<samp>#bd2300</samp>”)</li>
<li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(200, 100, 0)</samp>”)</li>
<li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<samp>rgb(100%, 175%, 0%)</samp>”)</li>
+ <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(200, 100, 0, .5)</samp>”)</li>
+ <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<samp>rgb(100%, 175%, 0%, 50%)</samp>”)</li>
<li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<samp>hsb(0.5, 0.25, 1)</samp>”)</li>
<li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
- <li>hsl(•••, •••, •••) — same as hsb</li>
- <li>hsl(•••%, •••%, •••%) — same as hsb</li>
+ <li>hsl(•••, •••, •••) — almost the same as hsb, see <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="HSL and HSV - Wikipedia, the free encyclopedia">Wikipedia page</a></li>
+ <li>hsl(•••%, •••%, •••%) — almost the same as hsb</li>
+ <li>Optionally for hsb and hsl you could specify hue as a degree: “<samp>hsl(240deg, 1, .5)</samp>” or, if you want to fancy, “<samp>hsl(240°, 1, .5)</samp>”</li>
</ul>
<h4>Usage</h4>
<pre class="javascript code"><code>paper.circle(100, 100, 20).attr({
<p>
To unbind events use the same method names with “un” prefix, i.e. <samp>element.unclick(f);</samp>
</p>
+ <h3 id="drag-n-drop">
+ Drag ’n’ Drop
+ </h3>
+ <p>
+ To make element “draggable” you need to call method <code>drag</code> on element.
+ </p>
+ <h4>Parameters</h4>
+ <ol>
+ <li>onmove <em>function</em> event handler for moving</li>
+ <li>onstart <em>function</em> event handler for start</li>
+ <li>onend <em>function</em> event handler for end of the drag</li>
+ </ol>
+ <h4>Usage</h4>
+ <pre class="javascript code"><code>var c = R.circle(100, 100, 50).attr({
+ fill: "hsb(.8, 1, 1)",
+ stroke: "none",
+ opacity: .5
+});
+var start = function () {
+ // storing original coordinates
+ this.ox = this.attr("cx");
+ this.oy = this.attr("cy");
+ this.attr({opacity: 1});
+},
+move = function (dx, dy) {
+ // move will be called with dx and dy
+ this.attr({cx: this.ox + dx, cy: this.oy + dy});
+},
+up = function () {
+ // restoring state
+ this.attr({opacity: .5});
+};
+c.drag(move, start, up);</code></pre>
+ <p>
+ To unbind drag use the <samp>undrag</samp> method.
+ </p>
</div>
<div id="column-2">
<h2>
<li>
<a href="#path"><code>path</code></a>
</li>
+ <li>
+ <a href="#clear"><code>clear</code></a>
+ </li>
<li>
<a href="#node"><code>node</code></a>
</li>
<a href="http://www.opensource.org/licenses/mit-license.php" title="MIT License" rel="license">Some Rights Reserved</a> by <a href="http://dmitry.baranovskiy.com/">Dmitry Baranovskiy</a>
</h3>
<h3 id="font">
- 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>
+ Logo by <a href="http://wasabicube.com/">Wasabicube</a>
</h3>
</div>
- </div>
- </div>
</div>
+ <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="syntax.js" type="text/javascript" charset="utf-8"></script>
+ <script src="museo.js" type="text/javascript" charset="utf-8"></script>
+ <script src="site.js" type="text/javascript" charset="utf-8"></script>
<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"));
pageTracker._trackPageview();
</script>
</body>
-</html>
\ No newline at end of file
+</html>
projects / raphael / blobdiff