• 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
2010-08-17 12:52:58 +10:00 · 2010-08-17 12:51:57 +10:00 · 2010-08-12 16:48:51 +10:00 · 2010-07-29 08:20:53 +10:00 · 2010-07-20 16:22:13 +10:00
3 changed files with 642 additions and 403 deletions
--- a/raphael-min.js
+++ b/raphael-min.js
--- a/raphael.js
+++ b/raphael.js
--- a/reference.html
+++ b/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 @@ var set = Raphael(["notepad", 320, 200, {
                        <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 @@ paper.circle(100, 100, 20).red();
                            <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 @@ element.hover(function (event) {
                        <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>
@ -854,6 +892,9 @@ element.hover(function (event) {
                            <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>
@ -972,14 +1013,14 @@ element.hover(function (event) {
                            <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 @@ element.hover(function (event) {
        pageTracker._trackPageview();
        </script>
    </body>
-</html>
+</html>
Author	SHA1	Message	Date
Dmitry Baranovskiy	50e03019d0	• 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	2010-08-17 12:52:58 +10:00
Dmitry Baranovskiy	80cf03bd2d	• 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	2010-08-17 12:51:57 +10:00
Dmitry Baranovskiy	455a5bf7fa	Added new syntax for animation hsl2rgb now accept h as degree (0..360), s and b as % (0..100) show="new" instead of target="blank" for SVG	2010-08-12 16:48:51 +10:00
Dmitry Baranovskiy	978b9fbc84	• angle method support three dots now • cached popup \|\| activeX for IE • fixed insertAfter • fixed timeouts for animation	2010-07-29 08:20:53 +10:00
Dmitry Baranovskiy	5d14aafb49	Added Custom attribites, method angle and snapTo	2010-07-20 16:22:13 +10:00