javascript
快速上手RaphaelJS--RaphaelJS_Starter翻译（二）
? ? ??操作Raphael元素的樣式
? ? ? 在上篇的內容中，我們已經提到了一個方法是attr()方法，是給一個Raphael圖形添加樣式及屬性定義的方法。我們要修改一個元素的樣式和屬性也可以使用attr方法來進行。上篇中我們聲明了一個rect對象，這里我們可以來修改它的樣式：
rect.attr('fill','#ddd');?
這行代碼將會把我們繪制好的矩形修改成為內部填充褐色。也就是說，attr()其實相當于mysql里面的insert into語句中的on duplicate key update,沒有我就添加有我就更新這樣子執行方式。
? ? ? Raphael元素的變換
? ? ??Raphael其實提供了好幾個方法供大家調用來變換元素，但是其中幾個的方法都是不推薦的。唯一推薦的元素變換方法是transform()方法。transform方法的參數與上篇最后的path命令串很相似，只不過這是transform命令串。它有4個命令：
T ? ? 平移
S ? ? 縮放?
R ? ? 按角度旋轉
M ? ? 變換矩陣
比如："t100,100r30,100,100s2,2,100,100r45s1.5"每個字母是一個命令。t是平移，r是旋轉，s是縮放，m是矩陣。
也有另類的“絕對”平移、旋轉和縮放：T、R和S。他們不會考慮到以前的變換。例如：...T100,0總會橫向移動元素100px，而...t100,0會移動垂直移動如果之前有r90，則發生了垂直移動，這個后面會有強調。上面的例子可以讀作“平移100,100；圍繞100,100旋轉30°；圍繞100,100縮放兩倍；圍繞中心旋轉45°；相對中心縮放1.5倍“。正如你可以看到旋轉和縮放命令的原點坐標為可選參數，默認的是該元素的中心點。
有一點需要注意，transform方法并不改變元素本身的任何狀態！無論你平移多少，transform執行后你獲得坐標信息仍舊創建元素時的坐標，但是transform的參數在變化。也就是transform的內容是你可以獲得的。無論你執行多少次transform，它保存著現在狀態和創建狀態之間的轉換內容，其實transform就是元素本身的一個屬性，而不是去改變元素的其它屬性。
原書中不介紹m矩陣的內容，這里我們暫時也不說這個命令，有時間補上。
這里的命令也有大小寫之分，也就是大小寫的執行結果可能會不同。比如我們執行r90t100 和r90T100結果是不同的，我們在代碼里面執行一下就一目了然了：
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> <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 rect2 = paper.rect(20, 20, 60, 40).attr({ "stroke": "red"// border color of the rectangle }).transform("r90t100,0"); var rect3 = paper.rect(20, 70, 60, 40, 20).attr({ "stroke": "yellow"// border color of the rectangle }).transform("r90T100,0"); console.log("第一個矩形坐標是：(" + rect.attr('x') + "," + rect.attr('y') + ")"); console.log("第三個矩形坐標是：(" + rect2.attr('x') + "," + rect2.attr('y') + ")"); console.log("第三個矩形的轉換屬性是："+rect2.transform()); console.log("第四個矩形的轉換屬性是："+rect3.transform()); </script> </body> </html>效果圖如下:
?代碼里面我們一共畫了4個矩形，2個直角矩形，2個圓角矩形。我們發下代碼里面創建矩形的時候，2個直角矩形的坐標是相同的，2個圓角矩形也是相同的。但是我們在創建的時候，其中一個直角和圓角矩形都執行了transform方法。直角執行了
transform("r90t100,0");圓角執行了： transform("r90T100,0"); 但是我們發現兩個參數出了大小寫不一致其余相同的，但是執行結果卻大相徑庭。是因為T執行了絕對平移而t是相對平移。什么意思？我想可能很多人會比較疑惑。絕對，就是無論其它什么變換我都不管不顧只會去執行我后面緊跟的參數，所以T執行的是不管你前面轉了90度還是沒轉，我都x軸平移100px。而相對，則是我轉了90度，我的頭部（假設元素都有一個頭部）本來朝右變成了朝下，x軸平移100px，好吧我向著x平移100px，但是實際是去y軸平移了100px，因為我本來指向x軸的頭部變成了y軸方向。我在瀏覽器控制臺打印了4句話，分別是2個直角矩形的坐標和2個矩形轉換后的transform的值。我們發現不論是不是發生了變換，并不改變元素的本身其它屬性。那么轉換屬性是怎么在dom里面體現的？我們通過firebug的dom查看機制來查看一下：我們的svg標簽里面建立了4個rect節點，后面2個有transfrom屬性，里面的值存儲在一個矩陣里面。但是其它的屬性你比較一下就會發現沒發生改變，got it?
下面貼個動畫變動的代碼，有興趣的同學可以執行一下，因為我截圖無法體現動畫效果，就不截圖了。
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> <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 }); rect.animate({ transform: "r90t100,0s1.5" }, 1000); // rect.animate({ // transform:"r90T100,0s1.5" // },1000); </script> </body> </html>?上面的動畫能夠很清晰的看到變換的過程。講到這里，我們引出了Raphael的動畫方法animate。下面我們就開始講Raphael圖形的動畫效果。
Raphael圖形的動畫效果
Raphael的圖形動畫效果可以達到非常平滑的程度，并且任何屬性都可以，不論是顏色、透明度、寬度、高度還是其它細節。如果運行了上面那段小程序的，你就能感覺到了。簡單的方法，簡單的參數，卻收獲了很好的效果。Raphael的動畫效果方法是animate()，語法如下：
Element.animate({動畫屬性的鍵值對},動畫時間,緩動類型,回調函數);
緩動類型其實就是動畫過渡公式，是哪種類型的。主要有以下這些類型：
- “linear”（線性）
- “<”或“easeIn”或“ease-in” （由慢到快）
- “>”或“easeOut”或“ease-out”（又快到慢）
- “<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
- “backIn”或“back-in”（開始時回彈）
- “backOut”或“back-out”（結束時回彈）
- “elastic”（橡皮筋）
- “bounce”（彈跳）
具體類型大家其實根據上面那個代碼就可以試驗一下。動畫時間是動畫的持續時間，毫秒為單位。回調函數是動畫執行完成后調用的函數。
rect.animate({transform: "r90t100,0s1.5"}, 1000,"bounce",function(){console.log("finish");});? ? ? ?大家可以將上面我那段代碼的動畫效果改成上面這句話來看一下效果，發現矩形在變換過去之后會像小球落地一樣跳幾下才停下來。并且動畫完成后會執行回調函數，在firebug控制臺打印finish。其它的幾個效果，大家復制上面類型的內容到bounce位置替換它就可以了。
? ? ? 這里需要注意的是，開始那個動畫效果的鍵值對，里面除了transform還是可以其它屬性，高度、寬度、填充顏色、透明度等等都可以。里面的值是動畫完成后的最終屬性，比如我們在鍵值對里面有個"width":200，其意思就是動畫執行完時矩形的寬度變成200px。這個地方不要以為只有transform屬性才可以，其實所有屬性都可以的。不過最后還是要強調一下，盡管動畫效果看上去很好玩，但是這個方法是使用代價還是很高的，它相比其它方法要消耗更多的瀏覽器等資源。所以要有選擇地去使用這個方法，不要濫用。
? ? ?小結一下，本篇到現在位置已經講了attr()方法修改元素屬性，transform()方法執行元素變化，animate()方法制造動畫效果。重要的是，如果你親自去執行了那么動畫和變換，你會發現Raphael在這個方面做的非常好，動畫以及變換都非常平滑，沒有任何突兀的感覺。那么動畫和元素變換到此為止，我們接下來就要講到元素的事件綁定了，也就是業務開發中的核心部分，與用戶的交互才是任何程序最迷人同時也是最為難開發者的地方。但是這本書，坦白地說，這個地方做的比較差。它就講了一個click()和鼠標懸停mouseover()方法，而且都是一個例子就帶過了。本書其實比較短就短在這個地方了。攤開了講，這里講個百八十頁都沒問題，但是本書就講了一頁多點。我先照著書上面的代碼寫個我們的測試代碼貼出來：
<script type="text/javascript"> var paper = Raphael("my-canvas", 650, 400); var rect = paper.rect(20, 20, 60, 40).attr({ "fill": "green", "stroke": "red" // border color of the rectangle }); rect.click(function(){ alert("hahah!"); });? ? ? ? ? ? ?// rect.mouseover(function(){
? ? ? ? ? ? ?// alert("wow");
? ? ? ? ? ? ?// });
? ? ? 大家把上面任意貼出來的代碼的Script內的內容換成這個即可，我們點擊矩形會發生alert事件，跳出提示框："hahah!"。其實后面那個mouseover()和mouseout()等一樣處理方式。代碼是不是看上去很簡單？哪里有我說的那么復雜，還得百八十頁才能講明白？我這么說，是因為我從開始學習Raphael開始就一直在鼓搗事件問題并且還沒搞定。我們想象一下，我可以對面前的圖形做什么操作：點擊、雙擊、左鍵單擊、右鍵單擊、鼠標懸停、鼠標移出、鼠標按下、鼠標摁住拖動、鼠標按下的鍵抬起······你也許會說這都是日常js開發中會碰到的鼠標事件，花點時間總是能搞定的？這是實話，只要你仔細去研究一下，這些都不是什么大問題。但是，如果我還要用鼠標拉長圖形怎么辦？我拖動圖形的同時，如果覆蓋或者說碰撞了別的圖形怎么辦？我怎么確定我的點是不是點到一個復雜圖形里面了？我要點擊選擇一個元素然后鍵盤修改圖形的屬性能不能做到？當一個圖形被另外一個圖形包裹，我點擊操作怎么確定是哪個元素？這里究竟有多少個坑，我想想都頭大。最令人頭疼的是，我剛才問的所有問題，都是我現在的工作需要解決的問題。這段話，如果你只是用Raphael去繪制圖形，并不對它做什么復雜操作，那么你可以無視它了。我們還是要先把書翻譯完成。為了不打斷本書的翻譯流程，我們的元素事件的話題將會另起一篇博文來進行講解和探討。
總結
以上是生活随笔為你收集整理的快速上手RaphaelJS--RaphaelJS_Starter翻译（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 快速上手RaphaelJS--Rapha
- 下一篇： 快速上手RaphaelJS--Rapha