（目前發現一些文章被盜用的情況，我們將在每篇文章前面添加原文地址，本文源地址：http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter3.html）
上篇博文我們講解到了Raphael的動畫、圖形變換和鼠標事件的內容，本篇介紹介紹你使用Raphael過程中會高頻用到的方法。
那些你必須知道的Raphael方法
Element 方法
這些方法由元素調用。比如我們前面的rect.click()。
animate()
animate() 方法是用來在特定時間內通過動畫效果來變換元素的屬性的方法。語法如下：
element.animate({
Property1:value,
Property2:value
},time_in_milliseconds,easing(optional),
callback_function(optional));
rect.animate({
"width":"300",
"height":"200"
},500,'bounce',function(){
alert("animation complete")
});
Raphael元素.animate(元素鍵值對,動畫持續時間,緩動類型(可選參數),回調函數(可選參數))。
attr()
attr()方法是Raphael方法中最常用的方法之一，它通過Raphael元素屬性鍵值對作為參數來對元素進行添加或者修改屬性。添加和修改可以使元素的樣式，也可以是其它物理屬性，比如坐標、寬高等等。語法如下：
element.attr({
Property1:value,
Property2:value
})
rect.attr({
"fill":"#17A9C6", // Adds a background color
"stroke":"#2A6570", // the color of the border
"stroke-width":2 // the width of the border
})
Raphael元素.attr({元素鍵值對})，元素鍵值對就是json格式的數據。我們可以操作的元素屬性如下所示：
元素名稱 類型 簡介
arrow-end string 路徑的末尾顯示箭頭。字符串格式是<type>[-<width>[-<length>]]。可能的類型：classic、block、open、oval、diamond、none， 寬：wide、narrow、midium，長：long 、short、midium。
clip-rect string 剪貼矩形。逗號或空格分隔的值：x，y，寬度和高度
cursor string 光標的CSS類型
cx number 圓或橢圓的圓心的x軸坐標
cy number 圓或橢圓的圓心的y軸坐標
fill string 填充。顏色、漸變或圖像
fill-opacity number 填充不透明度
font string 文本特性
font-family string 字體
font-size number 字體大小（像素）
font-weight string 字體粗細
height number 高度
href string URL。 指定時，元素表現為超鏈接
opacity number 透明度
path string SVG的路徑字符串格式
r number 圓、橢圓或圓角矩形的半徑
rx number 橢圓的橫向半徑
ry number 橢圓的垂直半徑
src string 圖像的URL，只適用於Element.image元素
stroke string 筆觸顏色
stroke-dasharray string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap string [“butt”, “square”, “round”]
stroke-linejoin string [“bevel”, “round”, “miter”]
stroke-miterlimit number
stroke-opacity number
stroke-width number 筆觸寬度（像素，默認為1）
target string 與 href 一起使用
text string 文本元素的內容。使用\n換行
text-anchor string [“start”, “middle”, “end”]，默認為 “middle”
title string 工具提示內容
transform string 請參照：Element.transform
width number
x number
y number
博客上面這個編輯器我不熟悉，我在排版時對齊后到預覽就亂七八糟，弄了幾次都沒成功。大家包含一下，有知道為什么的留言告訴一下。
click()
click()方法是用來為Raphael元素綁定單擊事件的方法，語法如下：
rect.click(function(){
//點擊之后的動作
alert("clicked rectangle");
})
dbclick()
dbclick()方法和click語法一樣，觸發為雙擊觸發。語法如下：
cir.dblclick(function(){
alert("It's a double click !");
})
mousedown()
mousedown()方法為Raphael元素綁定鼠標鍵按下的動作，任何鼠標鍵按下都是觸發事件。語法如下：
rect.mousedown(function(){
rect.animate({
'width':'200'
},400)
})
mouseup()
mouseup()方法與上面mousedown()相反，觸發條件為鼠標按下的鍵被釋放，語法也和上面完全一致。
mousemove()
mousemove()方法為鼠標在一個Raphael元素上面移過時觸發。
mouseover()
mousemove()方法為鼠標進入元素時觸發。這里需要說明，mouseover()和上面mousemove()的區別，你從外面移動到一個Raphael元素時，兩個方法都可以觸發事件。但是如果你把事件執行完成，繼續移動鼠標（假設此時鼠標光標還在元素中），mouseover()將不再繼續執行事件，而mousemove() 會持續觸發事件。
mouseout()
mouseout()方法觸發為鼠標移出一個Raphael元素時，它只有在移出時觸發，進入不觸發。
clone()
clone()方法是克隆一個Raphael時調用的。有個同鞋可能會問，那我直接var newrect=rect;難道不行嗎？實際上是不行的，因為newrect實際只是一個指向老rect的"快捷方式"，它並不會創建一個新的Dom。
下面這個是我們想要的效果的代碼：
var newrect=rect.clone().attr({"x":50,"y":50});
而不是這個：
var newrect=rect.attr({"x":50,"y":50});
data()
data()方法是個不可思議的方法。你可以根據自己需要為Raphael元素賦予你想賦予的含義，並且在需要時取回來：
newrect.data({ "name": "heihei", "age":2 }); newrect.click(function(){
alert(newrect.data("age")); });
我們可以隨意賦予元素它要裝載的內容，在需要的時候拿回來。這個功能非常靈活，你可以隨意設計關鍵詞，當你需要為用戶展現鼠標移過展現內容時就可以用這個。當然有了這個為元素添加data的方法就肯定有移出的方法。
removeData()
與上面的為元素添加內容相反，removeData()方法是移出已經添加了的內容：
newrect.removeData("age");
這樣，我們上那個alert就會提示是undefined。也就是removeData(你添加的內容的key)。
getBBox()
getBBox()方法獲得一個Raphael元素的邊界框（我把它成為包圍盒）。其實應該就是能包圍元素的最小矩形。getBBox()有個參數isWithoutTransform，值是true或者false。參數含義是獲得的邊界框是在執行transform也就是變換之前的元素還是變換后的。默認是false，意思是轉換后的，也就是你不設置里面參數為true，它獲得的包圍盒就是轉換之后的。書上說它的返回值有6個值：
{
x: number 左上角 x
y: number 左上角y
x2: number 右下角 x
y2: number 右下角 y
width: number 寬
height: number 高
}
我測試時其實返回的包圍盒對象是8個值，其實它還會帶着元素的cx和cy值返回，也就是元素的創建坐標。它的效果我們通過一段代碼來看：
<script type="text/javascript">
var paper = Raphael("my-canvas", 650, 400);
var cir = paper.circle(50, 50, 50).attr({
"fill": "green",
"stroke": "red" // border color of the rectangle
});
var newcir = cir.clone().attr({
"fill": "yellow"
}).transform("t100,100");
var bbox = newcir.getBBox();
var bboxOld = newcir.getBBox(true);
//我們通過獲得的包圍盒來繪制包裹圓的矩形
paper.rect(bbox.x, bbox.y, bbox.width, bbox.height).attr({
"stroke": "yellow"
});
paper.rect(bboxOld.x, bboxOld.y, bboxOld.width, bboxOld.height).attr({
"stroke": "purple"
});
</script>
由於其它html部分在前面的博文里面已經多次貼出，這里就不再重復了，只是把js部分貼出來，其它都是一樣的。這段程序執行結果如下：
如上圖，我們看到2個分別被紫色和黃色邊矩形包圍的綠色和黃色圓。通過前面的知識，我們知道黃色圓是使用clone()和transform()之后的綠色圓，我們的getBBox()方法執行了兩次，參數分別是為默認false和true。得到包圍盒信息以后，我們使用它來繪制了2個矩形，就是兩個包圍盒了。包圍盒這個方法我暫時想到的用處有兩個，一個似乎計算一個圖形的中心點，一個是用於輔助判斷碰撞。后面使用過程中可能會發現新的更有用的功能。
getPointAtLength()
getPointAtLength()方法在給定的path對象和指定的長度，返回那個位置點的坐標。語法如下：
path.getPointAtLength(length)
返回值：
X number 點的x坐標
Y number 點的y坐標
Alpha number 導數（切線）的角度
這里需要注意，原書這里是錯誤的語法，其實應path元素來調用這個方法，參數是一個長度，而原書成了path元素和長度2個對象作為參數。我已經試驗過代碼：
<script type="text/javascript">
var paper = Raphael("my-canvas", 700, 600);
var path = paper.path("M240,40L300,40L300,100");
var pathQ = paper.path("M240,40Q300,40 300,100").attr('stroke', 'red');
var pointObj = path.getPointAtLength(60);
console.log("x:" + pointObj.x + ",y:" + pointObj.y + ",Alpha:" + pointObj.alpha);
var pointObjQ = pathQ.getPointAtLength(60);
console.log("x:" + pointObjQ.x + ",y:" + pointObjQ.y + ",Alpha:" + pointObjQ.alpha);
</script>
上面的path代碼是上一篇博文中的2次貝塞爾曲線的程序，這里我們分別執行了3段線段的path和貝塞爾曲線指定長度60求取的點，效果如下:
toFront() 、toBack() 、hide() 、show() 、remove()
這里我們有5個方法一起講解。這5個方法都沒有參數，也就是 元素.方法()，就行了。從字面意思我們就能讀懂，toFront()到前面來，toBack()與toFront()相反，到后面去；hide()和show()相反，分別是隱藏和顯示；remove()刪除。大家如果了解Css的話，前面4個應該很好理解。toFront()就相當於我把一個dom的z-index修改的很大，大到超過其它所有元素，所以它離用戶眼睛最近而覆蓋其它元素，toback與它相反。而hide()和show()就更不必說了，把一個元素隱藏和顯示出來。就好像我們操作Css時會用到display:none;display:block;一樣。remove(),刪除元素，調用這個方法的元素將會從畫布上移除。我們調用時候就知道hide()時dom是存在的，只是你看不到而已；而remove()是直接把dom節點刪除掉了，也就是真正意義上的不存在了。
transform()
上一篇博文，transform()方法已經講解的很詳細，我們這里就不再重復。這里只是再說一點，element.transform("some transfrom string")的作用其實用element.attr({"transform":"some transform string"})也可以達到。上一篇里面我們強調過，transform其實是Raphael元素的一個屬性，attr既然可以修改和添加屬性，那當然可以這樣子做。
到此為止，我們介紹了比較重要的Element方法。也就是供元素來調用的方法，下面我們要講解的時候paper，也就是畫布可以調用的方法。
畫布的方法
畫布的方法只能由畫布本身來調用，我們前面的聲明的畫布是var paper=Raphael("my-canvas", 650, 400);也就是下面講到的方法需要paper去調用。其實前面我們已經碰到了很多個方法是由paper去調用的。還記得吧，我們去創建每個圖形都是paper來進行的。paper.circle()、paper.rect()、paper.ellipse()、paper.path()。這些我們前面都舉了例子來描述，這里就不再描述前面已經出現的方法。我們繼續講解其它前面沒講到的畫布方法。
paper.clear()
paper.clear()方法清空畫布，還記得上面元素方法里面有個remove(）方法吧。那個是單個去除一個元素，這里是畫布來調用清除所有元素的方法。
paper.image()
這里說明一下，RaphaelJS確實是個非常優秀的前台圖形繪制工具，但是不要以為它可以替代圖片。其它普通圖片和Raphael是互補的，而不是可以替代的關系。所以Raphael提供了引用圖片的方法，就是paper.image()。它有5個參數：
參數 說明
src 圖片的路徑，對經常寫前台的童鞋們來說這個小菜一碟
X 圖片擺放位置的x坐標
Y 圖片擺放位置的y坐標
width 圖片的寬度
height 圖片的高度
例：paper.image("images/testimage.png",10,10,200,150);將在畫布的(10,10)位置擺放一個寬200，長150的圖片。
paper.setSize()
paper.setSize()用來重新設置畫布的大小。你以在發現畫布大小不合適時調整畫布的大小而不是需要從頭建立畫布然后重復原來的工作。方法有2個參數：寬和高
paper.setSize(600,800);
我們將畫布的大小修改為寬600px，高800px。
paper.set()
paper.set()方法是個很重要的方法。它幫助我們對Raphael元素進行分組然后進行批量管理。也就是我們放進一個set里面的Raphael元素如果用set來執行一些動作，那么這些操作是所有在set里面的元素起作用的。但是set本身並不創建和復制、克隆Raphael元素，也就是你刪除一個set，不會刪除set里面的Raphael元素，但是你可以用set來幫助管理set內的元素。我們貼個代碼看看：
<script type="text/javascript">
var paper = Raphael("my-canvas", 650, 400);
var rect = paper.rect(20, 20, 60, 40).attr({
"stroke": "red", // border color of the rectangle
});
var rect1 = paper.rect(20, 70, 60, 40, 20).attr({
"stroke": "yellow", // border color of the rectangle
});
var cir = paper.circle(150, 100, 30);
var raphaelSet = paper.set();
raphaelSet.push(rect, rect1, cir);
raphaelSet.attr({
"fill": "red"
});
</script>
下面是執行效果：
我們查看上面的代碼，我們的步驟是聲明一個set對象RaphaelSet,然后把我們創建的Raphael元素push進去（需要注意這里Raphael里面的set對象你push進去以后是有順序的，便於我們后續操作），然后我們把整個set通過attr加了一個填充紅色的指令，然后效果我們可以在上圖看到。這里就印出來我們接下來要講解的內容，那就是set對象可以調用的方法。接下來我們就開始講解set方法。
set的方法
接下來講解的方法是只有set對象才能調用的方法，前面我們已經提到了set對象的聲明：
var raphaelSet = paper.set();
set.clear()
我們想要清空set，可不要用remove()而是用clear()，remove()會把所有set里面的元素remove掉。clear()只是清除set里的內容，並不會對里面的內容本身有影響。那就會有同鞋問，我不想清空set，只想刪除其中一個可以嗎？當然是可以的。那就是下個方法了。
set.exclude()
set.exclude(rect);還記得我前面的代碼里面將rect添加進入raphaelSet里面嗎?現在你可以試一試在在執行raphaelSet.attr()之前使用raphaelSet.exclude(rect);試一試。效果和我們想象的一樣，第一個矩形沒有被填充紅色，因為它被從set里面剔除出來了。
set.forEach()
看到forEach關鍵詞，我們立即就能理解到這個方式是干什么用的。那就是日常開發中最常碰到的循環。set.forEach()就是去循環我們創建的set對象，然后通過遍歷對set內的元素進行操作。這個功能是差不多算是set里面最重要的方法了，我們使用set大部分業務都需要這個循環了。
raphaelSet.forEach(function(ele){
ele.attr({"fill","red"});
});
這句代碼的效果大家可以試一試，可以替換我們剛才那個raphaelSet.attr({"fill","red"});
set.pop()
彈出set中的最后一個元素，就是清除最后一個添加進去的元素。
raphaelSet.push(rect, rect1, cir); raphaelSet.pop(); raphaelSet.attr({ "fill": "red" });
我們上面貼的那個代碼，修改成為這段，就會發現圓形並沒有被填充紅色，因為在執行填充之前，它已經被從set里面pop了出來。
set.splice()
set.splice()方法和普通的js或者java的數據的slice有點不同。它有3個參數index,count,element。什么意思呢？set.splice(1,2,rect)，我從set里面index為1的位置開始往后刪除2個元素，然后把rect添加進來。所以slice可以同時刪除和添加元素。注釋它是有返回值的，它將返回被刪除掉的元素。我們用代碼來看下：
<script type="text/javascript">
var paper = Raphael("my-canvas", 650, 400);
var rect = paper.rect(20, 20, 60, 40).attr({
"stroke": "yellow", // border color of the rectangle
});
var rect1 = paper.rect(20, 90, 60, 40, 20).attr({
"stroke": "yellow", // border color of the rectangle
});
var rect2 = paper.rect(90, 20, 60, 40, 5).attr({
"stroke": "yellow", // border color of the rectangle
});
var rect3 = paper.rect(90, 90, 60, 40, 5).attr({
"stroke": "yellow", // border color of the rectangle
});
var cir = paper.circle(200, 100, 30);
var cir1 = paper.circle(250, 100, 20);
var cir2 = paper.circle(280, 100, 10);
var raphaelSet = paper.set();
raphaelSet.push(rect, rect1, rect2, rect3);
raphaelSet.splice(2, 1, cir, cir1, cir2);
raphaelSet.forEach(function(ele){
ele.attr({
"fill": "red"
});
console.log(ele[0]);
})
</script>
執行效果如下：
為了方便查看我們元素的數序，我在控制台了打印了一下set里面的內容，我們執行了聲明set、push元素、從第二個index開始刪除一個rect然后插入3個circle、調用forEach()循環這個set然后執行填充紅色指令。
本篇博文差不多到此介紹了raphaelJS中最常用的方法。當然還有其它的一些方法沒講到。我們所翻譯的書到此主題內容已經翻譯完成了。后面的內容其實大家可以略過。接下來的內容主要是介紹一些官方或者教程網站之類的東西。關心的童鞋可以去看一下那些網站。下篇博文的更新內容應該是翻譯另外一本稍微復雜點的書，那本書的后面好像有一些有意思的例子，我們可以嘗試一下。Ok，see you!