上篇博文我們講解到了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>]]?？赡艿念愋?#xff1a;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元素上方移過期觸發。

mou搜刮引擎優化ver（）

?????? mousemove（）辦法為鼠標進入元素時觸發。這里須要申明，mou搜刮引擎優化ver（）和上方mousemove（）的差別，你從外面移動到一個Raphael元素時，兩個辦法都可以觸發事務。然則若是你把事務履行完成，持續移動鼠標（假設此時鼠標光標還在元素中），mou搜刮引擎優化ver（）將不再持續履行事務，而mousemove（） 會連氣兒觸發事務。

mou搜刮引擎優化ut（）

?????? mou搜刮引擎優化ut（）辦法觸發為鼠標移出一個Raphael元素時，它只有在移出時觸發，進入不觸發。

clone（）

?????? clone（）辦法是克隆一個Raphael時調用的。有個同鞋可能會問，那我直接var newrect=rect;莫非不可嗎？實際上是不可的，因為newrect實際只是一個指向老rect的"快捷體式格式"，它并不會創建一個新的Dom。

下面這個是我們想要的結果的代碼：


[javascript] view plaincopyprint?

??? var newrect=rect.clone（）.attr（{"x":50，"y":50}）; ?
??? <br style="line-height:15px"> ?



而不是這個：


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 trans 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進去，然后我們把全部set經由過程attr加了一個填充紅色的指令，然后結果我們可以在上圖看到。這里就印出來我們接下來要講解的內容，那就是set對象可以調用的辦法。接下來我們就開端講解set辦法。

set的辦法

???? 接下來講解的辦法是只有set對象才干調用的辦法，前面我們已經提到了set對象的聲明：

var raphaelSet = paper.set（）;

set.clear（）

總結

以上是生活随笔為你收集整理的快速上手RaphaelJS--RaphaelJS_Starter翻译（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。