<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0042)http://raphaeljs.com/reference.html -->
<HTML lang=en><HEAD><TITLE>Raphaël Reference</TITLE>
<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"><LINK
rel=apple-touch-icon-precomposed href="/Raphael.png"><LINK rel=stylesheet
type=text/css href="Raphaël%20Reference_files/site.css"><LINK
rel="shortcut icon" type=image/x-icon href="/favicon16.png">
<META name=GENERATOR content="MSHTML 8.00.7600.16384"></HEAD>
<BODY id=reference class=raphael>
<DIV id=header>
<H1><SPAN> </SPAN>Raphaël—JavaScript Library</H1></DIV>
<DIV id=content>
<DIV id=top></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>
<P>or</P>
<OL>
<LI>all <EM>array</EM> (first 3 or 4 elements in the array are equal to
[containerID, width, height] or [x, y, width, height]. The rest are element
descriptions in format {type: type, <attributes>})</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);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);</CODE></PRE>
<H3 id=circle>circle </H3>
<DIV id=circle-sample class=sample></DIV>
<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(50, 50, 40);</CODE></PRE>
<H3 id=rect>rect </H3>
<DIV id=rect-sample class=sample></DIV>
<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, 50, 50);</CODE>
<CODE>// rectangle with rounded corners</CODE>
<CODE>var c = paper.rect(40, 40, 50, 50, 10);</CODE></PRE>
<H3 id=ellipse>ellipse </H3>
<DIV id=ellipse-sample class=sample></DIV>
<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(50, 50, 40, 20);</CODE></PRE>
<H3 id=image>image </H3>
<DIV id=image-sample class=sample></DIV>
<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, 80, 80);</CODE></PRE>
<H3 id=set>set </H3>
<DIV id=set-sample class=sample></DIV>
<P>Creates array-like object to keep and operate couple of elements at once.
Warning: it doesn’t create any elements for itself in the page. </P>
<H4>Usage</H4><PRE class="javascript code"><CODE>var st = paper.set();</CODE>
<CODE>st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);</CODE>
<CODE>st.attr({fill: "red"});</CODE></PRE>
<H3 id=text>text </H3>
<DIV id=text-sample class=sample></DIV>
<P>Draws a text string. If you need line breaks, put “\n” in the 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(50, 50, "Raphaël\nkicks\nbutt!");</CODE></PRE>
<H3 id=path>path </H3>
<DIV id=path-sample class=sample></DIV>
<P>Creates a path element by given path data string. </P>
<H4>Parameters</H4>
<OL>
<LI>pathString <EM>string</EM> [optional] Path data in <A
title="Details of a path's data attribute's format are described in the SVG specification."
href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG path string
format</A>.</LI></OL>
<H4>Usage</H4><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>
<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>// draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(10, 10, 10);
c.node.onclick = function () {
c.attr("fill", "red");
};</CODE></PRE>
<H3 id=paper>paper </H3>
<P>Internal reference to “paper” where object drawn. Mainly for use in plugins
and element extensions. </P>
<H4>Usage</H4><PRE class="javascript code"><CODE>Raphael.el.cross = function () {
this.attr({fill: "red"});
this.paper.path("M10,10L50,50M50,10L10,50")
.attr({stroke: "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>
<P>or</P>
<OL>
<LI>degree <EM>number</EM> Degree of rotation (0 – 360°)</LI>
<LI>cx <EM>number</EM> [optional] X coordinate of the origin of rotation</LI>
<LI>cY <EM>number</EM> [optional] Y coordinate of the origin of
rotation</LI></OL>
<H4>Usage
raphael 1.5.2
5星 · 超过95%的资源 需积分: 10 148 浏览量
2010-11-22
22:22:16
上传
评论
收藏 75KB ZIP 举报 
jquery.svg.raphael.zip （7个子文件） 
doc Rapha塴 Reference_files 
raphael.js 59KB museo.js 9KB site.js 19KB site.css 10KB syntax.js 1KB Rapha塴 Reference.htm 42KB jquery.svg.raphael raphael-1.5.2.js 150KB资源评论
xiaobai11182012-07-18正好需要用,下载之后验证下 还是很好用的
