Browse files

• fixed IE8 issue with the HTML element named Raphael

• fixed precision for arcs in IE
• added caching to getPointAtSegmentLength function
• added ability to do more than one animation of an element at the same time
• added "cubic-bezier()" as an easing method
  • Loading branch information...
1 parent 80cf03b commit 50e03019d0b81868ced471c9cf564b58aaddb93f @DmitryBaranovskiy committed Aug 17, 2010
Showing with 66 additions and 131 deletions.
  1. +2 −108 raphael-min.js
  2. +64 −23 reference.html
View
110 raphael-min.js
2 additions, 108 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
87 reference.html
@@ -1,34 +1,24 @@
-<!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>&nbsp;</span>Raphaël—JavaScript Library</h1>
</div>
<div id="content">
- <div>
- <div>
+ <div id="top">&nbsp;</div>
<div id="column-1">
<h2>Main Function</h2>
<h3 id="Raphael">
@@ -189,6 +179,15 @@ <h3 id="path">
<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>
@@ -755,10 +754,13 @@ <h3 id="colour">
<li>#•••••• — full length HTML colour: (“<samp>#000000</samp>”, “<samp>#bd2300</samp>”)</li>
<li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(200,&nbsp;100,&nbsp;0)</samp>”)</li>
<li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<samp>rgb(100%,&nbsp;175%,&nbsp;0%)</samp>”)</li>
+ <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(200,&nbsp;100,&nbsp;0, .5)</samp>”)</li>
+ <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<samp>rgb(100%,&nbsp;175%,&nbsp;0%, 50%)</samp>”)</li>
<li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<samp>hsb(0.5,&nbsp;0.25,&nbsp;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,&nbsp;1,&nbsp;.5)</samp>” or, if you want to fancy, “<samp>hsl(240°,&nbsp;1,&nbsp;.5)</samp>”</li>
</ul>
<h4>Usage</h4>
<pre class="javascript code"><code>paper.circle(100, 100, 20).attr({
@@ -821,6 +823,42 @@ <h3 id="events">
<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>
@@ -855,6 +893,9 @@ <h3 id="events">
<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>
<li>
@@ -972,14 +1013,14 @@ <h3 id="copyright">
<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 &#38; 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"));
@@ -989,4 +1030,4 @@ <h3 id="font">
pageTracker._trackPageview();
</script>
</body>
-</html>
+</html>

0 comments on commit 50e0301

Please sign in to comment.