Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 50e03019 by Dmitry Baranovskiy
Options

• 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
parent 80cf03bd
Showing with 64 additions and 24 deletions
raphael-min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
reference.html
<!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>
......@@ -855,6 +893,9 @@ element.hover(function (event) {
<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 @@ 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>
\ No newline at end of file
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment