Raphael Js矢量庫API簡介：
Raphael Javascript 是一個 Javascript的矢量庫。
2010年6月15日，著名的JavaScript庫ExtJS與觸摸屏代碼庫項目jQTouch，以及SVG、VML處理庫Raphael合並，形成新的庫Sencha。主要應對HTML5等新趨勢，加強豐富圖形和觸摸屏功能的重要舉措。
Raphael Javascript 的創始人 Dmitry Baranovskiy也加入ExtJS。
ExtJS 是一個強大的Javascript 框架，它重組件化，很容易做出強大的、可媲美客戶端的界面（這個框架是收費的，所以國內用的人比jQuery少多了）。
jQTouch 是一個 jQuery 的插件，主要用於手機上的 Webkit 瀏覽器上實現一些包括動畫、列表導航、默認應用樣式等各種常見UI效果的 JavaScript 庫。
Raphael Javascript 的作者就是大名鼎鼎的前端大牛 Dmitry Baranovskiy。
他出過幾道有意思的 Javascript 題目：《你真的已經搞懂JavaScript了嗎？》
Raphael能做什么？
Raphael Javascript可以處理SVG、VML格式的矢量圖。
它使用SVG W3C推薦標准和VML作為創建圖形的基礎，你可以用Javascript 操作Dom 很容易的創建出復雜的柱狀圖、走勢圖、曲線圖等各種圖表，可以畫圖，可以畫出任意復雜度的圖像，以及圖表或圖像裁剪和旋轉等復雜操作。
同時它是跨瀏覽器的，完全支持 Internet Explorer 6.0+。
Raphael Javascript 目前支持的瀏覽器有：
Firefox 3.0+
Chrome 3.0+
Safari 3.0+
Opera 9.5+
Internet Explorer 6.0+
PS：新版本的遨游、QQ瀏覽器、TT瀏覽器（已經被騰訊放棄了）、獵豹瀏覽器、360瀏覽器 的內核都是 webkit（ Chrome 就是Webkit ），至於別的國產瀏覽器，都是在Internet Explorer 外面嵌套了一層殼而已
-----------------------------------------------------------
簡而言之： Raphael是一個強大易用的矢量圖形JS庫
------------------------- 動畫 -------------------------
>> 動畫 Animation ~~~動畫對象的方法調用
> Animation.delay(t); 創建現有的動畫對象的副本，並且可以指定延遲時間。
參數
t:number 動畫延遲執行的時間，單位：毫秒ms
返回
新的動畫對象
例子：
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); //調用靜態方法animation創建一個動畫對象 2秒內 圓心坐標移動到位置(10,20)處
var paper = Raphael(100, 100, 300, 400); //在頁面位置(100,100)處，創建300*400大小的畫布
//在畫布位置(40, 40)處畫一個半徑50的圓, 並填充紅色 Raphael的語法和jq十分類似，同樣支持鏈式調用風格
var circle = paper.circle(40, 40, 50).attr("fill","red");
circle.animate(anim); //立即執行動畫
circle.animate(anim.delay(500)); // 延時500毫秒執行動畫
> Animation.repeat(n); 創建現有動畫對象的副本，並指定重復頻率。
參數
n:number 動畫迭代次數。如果傳入 0，表示動畫會一直執行
返回
新的動畫對象
例子
circle.animate(anim.repeat(2));
circle.animate(anim.delay(500).repeat(2)); //鏈式調用
~~~所有Element的方法默認都返回元素自身，以便鏈式調用。
> Element.animate(...); 為指定元素創建動畫，並執行。
參數：
params:object 元素的最終屬性，請參照：Element.attr
ms:number 動畫持續時間，單位：毫秒ms
easing:string 緩動類型。接受Raphael.easing_formulas其中之一，或CSS格式：cubic-bezier(XX, XX, XX, XX)
callback:fn 回調函數。動畫結束時將被調用。
或
animation:object 動畫對象，請參照：Raphael.animation
返回
原始元素
> Element.animateWith(...); 作用與 Element.animate 類似，但保證動畫與另一元素的同步執行。 ~~參數中需額外指定需要同步動畫的原速度
參數
el:object 要同步的元素
anim: object 要同步的動畫
params:
ms:
easing:
callback:
或
el:
anim:
animation:
返回
原始元素
> Element.pause([anim]) 暫停執行動畫，稍后可以恢復執行。
> Element.resume([anim]);
> Element.setTime(anim, value) ~~~設置元素動畫跳到指定時間點
以毫秒為單位給元素設置動畫的狀態。類似Element.status方法。
參數
anim object 動畫對象
value number 動畫持續的毫秒數
返回：object如果value被指定則返回原始元素
請注意，在動畫過程中會觸發下列事件：在每個動畫幀anim.frame.<id> ，在開始時anim.start.<id>結束時anim.finish.<id> 。
> Element.status([anim], [value]);獲取或設置元素的動畫狀態。
* Element.status(anim, value); value取值 0 - 1。如果指定，方法就像一個setter，並設置指定動畫的狀態為指定值。這將導致動畫跳轉到指定位置。
* Element.status() 返回{ anima:.., status:..}
* Element.status(value);
> Element.stop([anim]); 停止執行動畫。
------------------------- 元素屬性attr -------------------------
> Element.attr(...); 設置或讀取元素的屬性。類似 jQuery.fn.attr();
Element.attr(attrName,value);
Element.attr({attr1:v1, attr2:v2});
Element.attr(attrName);
Element.attr(attrNames); 參數為attrNames數組 則返回指定屬性名的當前值組成的數組
Elment.attr(); //返回屬性對象
元素的屬性有以下這些：（ 請參閱解釋這些參數的SVG規范 。）
~~~ 位置大小
height: number 高度
width: number
x : number
y: number
r : number 圓、橢圓或圓角矩形的半徑
cx : number 圓或橢圓的圓心的x軸坐標
cy : number 圓或橢圓的圓心的y軸坐標
rx : number 橢圓的橫向半徑
ry: number 橢圓的垂直半徑
~~~ 背景描邊透明度等
opacity : number 透明度
fill: string 填充。顏色、漸變或圖像
fill-opacity: number 填充不透明度
stroke ： string 筆觸顏色
stroke-width : number 筆觸寬度（像素，默認為1）
stroke-opacity: number
stroke-dasharray ： string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap ： string [“butt”, “square”, “round”]
stroke-linejoin : string [“bevel”, “round”, “miter”]
stroke-miterlimit : number
~~~ 圖象文本超鏈接等
text : string 文本元素的內容。使用\n換行
text-anchor : string [“start”, “middle”, “end”]，默認為 “middle”
title : string 工具提示內容
src ； string 圖像的URL，只適用於Element.image元素
href : string URL。指定時，元素表現為超鏈接
target : string 與 href 一起使用
cursor : string 光標css類型
paths: tring SVG的路徑字符串格式
transform : string 請參照：Element.transform
~~~ 字體以及其他屬性
font : string 文本特性
font-family : string 字體
font-size : number 字體大小（像素）
font-weight: string 字體粗細
arrow-end : string 路徑的末尾顯示箭頭。
clip-rect : string 剪貼矩形。逗號或空格分隔的值：x，y，寬度和高度
>> 線性漸變和徑向漸變
> 線性漸變值的格式 <angle>-<color>-[<color>[:<offset>]]*-<color>
el.attr({"fill": "90-#fff-#000"}); //90°線性漸變從白色到黑色；
el.attr({"fill": "0-#fff-#f00:20-#000"}); //0°從白色通過紅色（20％位置）漸變為黑色。
> 徑向漸變值的格式 ： r[(<fx>, <fy>)]<color>[-<color>[:<offset>]]*-<color>
~~~跟線性漸變值格式基本相同 只不過是角度變為可選的漸變起點
徑向漸變只適用於圓形和橢圓形。
circle.attr({"fill": "r#fff-#000"}); //從白色到黑色；
circle.attr({"fill": "r(0.25, 0.75)#f00-#000"}); //從白色漸變到黑色，焦點在0.25，0.75。焦點坐標的外圍是0 .. 1。
顏色解析
顏色名稱： red,green...等
十六進制顏色值：#fc00, #fad0ea
顏色函數：
rgb(), hsb(), hsl(),三種色彩模式的函數，參數值為整數或百分比
rgba(), hsba(), hsla() 都支持透明度
例子:
rgb(200,200,10) , rgb(100%,10%,20%)
rgba(200,200,3, .5), rgba(100%, 20%, 10%, 50%)
hsb(0.5, 0.25, 1), hsb(50%, 20%, 100%)
hsba()
------------------------- 事件 -------------------------
> Element.click(handler); //handler內部 this指向元素自身，注意在這里元素和節點是不同的，它們的關系類似jQuery對象和封裝的dom對象
> Element.dblclick(handler);
> Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext]);
onmove:fn 移動處理函數 函數內部可獲得 dx dy x y event (位移距離deltaX deltaY 鼠標坐標 dom事件對象)
onstart:fn 拖拽開始的處理函數 函數內部可獲得 x y event (鼠標坐標和dom事件對象)
onend: fn 拖拽結束處理函數 函數內部可獲得 event (dom事件對象)
mcontext : object 移動處理函數環境（上下文）
scontext : object 拖拽開始處理函數環境
econtext : object 拖拽結束處理函數環境
> Element.hover(fn_in, fn_out, [icontext], [ocontext]); ~~~同 jq hover，icontext ocontext指定方法體內的上下文
> Element.mousedown(handler);
> Element.mousemove(handler);
> Element.mouseup(handler);
> Element.mouseout(handler);
> Element.mouseover(handler);
> Element.onDragOver(handler) 為元素分配drag.over.<id>事件處理程序的快捷方式，其中id是元素的id
handler 傳入的第一個參數是你拖拽的元素
~~~~~ Raphael支持觸屏事件
> Element.touchstart(handler)
> Elment.touchmove(handler)
> Element.touchend(handler);
> Element.touchcancel(handler);
~~~~~取消事件綁定 在原函數前加un...
> Element.unclick(handler) undblclick unhover unmousemove untouchstart untouchmove ....
> eve(name, scope, varArgs); ~~~觸發事件 name 事件名稱，點（.）或斜線（/）分隔; varArgs 將被發送到事件處理程序其余的參數
使用指定的name、作用域和參數觸發事件。
> eve.listeners(name); 內部方法，返回監聽指定name事件的回調函數組成的數組。
> eve.nt([subname]);
在事件處理程序內使用，可以獲取事件的實際名稱。
參數
subnamestring
事件的子名稱
返回：string名稱的事件，如果沒有指定subname
或
返回：booleantrue ，如果當前事件的名稱中包含subname
> eve.off(name, f); 從指定名稱的事件監聽器列表中刪除指定的函數。
> eve.unbind(name, f) ~~~同 eve.off(name, f);
> eve.on(name, f); 為給定的名稱綁定一個事件處理程序。可以在名稱中使用通配符“ * “：
返回 function 返回的函數接受一個數字參數，表示處理程序的z-index。這是一個可選功能，只有當你需要使用，以確保處理程序的一些子集被設置為特定的調用順序，而不使用指派順序。
例子：
eve.on('*.under.*',f);
eve("mouse.under.floor"); //觸發f
eve.on("mouse",eat)(2);
eve.on("mouse",scream);
eve.on("mouse", catch)(1);
這將確保catch函數將被在eat 之前調用。如果你想要把你的處理程序放在未索引的處理程序之前，指定一個負值。注：我假設大部分的時間你不需要擔心的z-index，但很高興有此功能來“以防萬一”
> eve.once(name, f); 為給定的名稱綁定一個一次性事件處理程序。只運行一次，然后解除本身。
返回 function ，與eve.on返回的函數類似
eve.once("login", f);
eve("login"); //觸發f
eve("login"); //沒有監聽 不會觸發f
> eve.stop(); 用於在事件處理程序內停止事件，防止觸發任何后續監聽器。
> eve.version(); 返回當前庫的版本。
------------------------- 元素操作 -------------------------
> Element.clone(); //復制元素，畫布源元素位置有個一樣的副本
> Element.remove(); ~~~從畫布刪除元素
> Element.id 元素的唯一的ID。當你要監聽元素的事件時尤其有用。因為所有的事件被以下面的格式觸發：<module>.<action>.<id> 。對Paper.getById方法也有用。 ~~~元素在畫布中的id?
> Element.insertAfter()
> Element.insertBefore()
> Element.isPointInside(x, y); 確定指定點在當前元素的形狀內
> Element.matrix 矩陣對象，它代表元素的變換
> Element.next 返回層次結構中的下一個元素的引用。 ~~~下一個同輩元素?
> Element.prev
> Element.toBack(); 將元素向下移動。 ~~堆疊層次?
>Element.toFront();
> Element.node 返回DOM對象的引用。 ~~~類似 jQuery對象包裝着dom對象，不同的是 jQuery對象默認是包裝一組dom對象，而Raphael元素默認包裝一個dom對象 Elenent.node.onclick = function(){ .. } 類似html Dom對象
circle.node.onclick = function(){ c.attr('fill', 'red')};
> Elment.paper 返回繪制對象的“畫布”的內部引用。主要用於插件和元素擴展。
例子：
Raphael.el.cross = function(){ //Raphael.el 類似 Raphael構造函數的原型對象
this.attr({fill: 'red'});
this.paper.path('M10,10L50,50M50,10L10,50')
.attr({stroke: 'red'});
};
> Element.raphael Raphael對象的內部引用。即使它目前不可用。 ~~~對構造函數Raphael的引用?
例子：
Raphael.el.red = function(){
var hsb = this.paper.raphael.rgb2hsb(this.attr('fill'));
hsb.h = 1;
this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex });
}
>Element.getSubpath(from, to); //獲取指定路徑上指定長度的子路徑。只適用於“路徑”類型的元素。
~~~返回子路徑的路徑字符串
>Eelement.getTotalLength(); 返回路徑的長度，以像素為單位。只適用於“路徑”類型的元素。
> Element.glow([options]) 為指定元素添加類似光暈的效果，返回創建的光暈元素組。請參照：Paper.set.
注：光暈不與元素關聯。如果你改變元素的屬性，它並不會自我調整。
options={
width: number 光暈大小 默認10
fill: boolean 是否填充 默認false
opacity: number 透明度 默認 0.5
offsetx: number 橫向偏移 0
offsety: number 垂直偏移 0
color: string 發光顏色 默認black
}
> Element.hide(); ~~ 隱藏元素 對應的方法 Element.show()
>
------------------------- 畫布對象 -------------------------
> Paper.add(json); 導入JSON格式的元素。格式：{type: type, <attributes>}
例子：
var paper = Raphael(100, 100, 300, 400);
paper.add([
{type:"circle", cx:10, cy:10, r:5},
{type:"rect", x:10, y:10, width:100, height:100, fill:'green'}
]);
> Paper.bottom 指向畫布上的底層元素
> Paper.top 指向畫布上的頂端元素
> Paper.ca Paper.customAttributes的引用 ~~~自定義屬性的引用
~~~~ 畫布上繪圖相關
> Paper.circle(x,y,r); ~~~圓心坐標x,y 半徑
例子：
var paper = Raphael('test', 400, 400);
var c = paper.circle(100, 100, 50);
> Paper.rect(x, y, width, height, [r]) ; ~~~左上角坐標x,y 寬高 圓角半徑
> Paper.ellipse(x, y, rx, ry); ~~~橢圓中心的坐標x,y 長短半徑
> Paper.image(src, x, y, width, height); 在畫布中插入一張圖片
例子：
var p = Raphael('test2', 300, 300);
p.image('1.jpg', 20, 20, 100, 300);
> Paper.text(x, y, text); ~~~坐標x,y 處 text文字內容 返回 Raphael元素對象，類型為“文本”
繪制一個文本字符串。如果你需要換行，使用“\n”。
例子：
var t = paper.text(50, 50, 'welcome new day');
t.attr({'font-size':30, fill:'blue'});
> paper.path([pathString]); 由指定的路徑字符串創建一個路徑元素。
路徑字符串由一個或多個命令組成。每個命令以一個字母開始，隨后是逗號（“,”）分隔的參數。例如："M10,20L30,40"
我們看到兩個命令：“M”與參數(10, 20)和“L”與參數(30, 40)大寫字母的意思是命令是絕對的，小寫是相對的。
參照：SVG路徑字符串格式 。
命令 名稱 參數
M 移動到（moveTo） (x y)+
Z 閉合路徑（closepath） (none)
L 直線（lineTo） (x y)+
H 水平直線 x+
V 垂直直線 y+
C 曲線（curveto） (x1 y1 x2 y2 x y)+
S 平滑曲線 (x2 y2 x y)+
Q 二次貝賽爾曲線 (x1 y1 x y)+
T 平滑二次貝塞爾曲線 (x y)+
A 橢圓弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom 曲線* x1 y1 (x y)+
* “Catmull-Rom 曲線”不是標准SVG命令，在2.0版時被加入。 注：有種特殊情況，路徑只包含三個命令：“M10,10R…z”。在這種情況下，路徑將平滑連接到它的起點。
> Paper.print(x, y, string, font, [size], [origin], [letter_spacing])⚓➭
創建路徑，表示指定字體，指定大小，在指定位置的指定文本。該方法的結果是路徑元素，它包含整個文本作為一個單獨的路徑。
> Paper.clear(); // 清除畫布上所有元素。
> Paper.customAttributes ~~~自定義屬性對象 你可以添加自定義屬性來方便設置一批屬性：
例子：
var paper = Raphael(10,10, 300, 300);
paper.customAttributes.hue = function(){ //~~~ hue相當於一個 setter函數
num = num % 1;
return {fill: "hsb(" + num + ",0.8,1)"};
}
var c = paper.circle(10, 10, 10).attr({hue: .45}); //~~~指定setting函數和需傳入的參數
// or like this
c.animate({hue: 1}, 1e3);
自定義屬性(~~~本質上為setting函數) 也可以接受多個參數
paper.custromAttributes.hsb = function(h, s, b){
return {fill: "hsb(" + [h,s,b].join(',') + ")"};
}
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1,0,0.3]}, 1e3); ~~~多參數時，參數以空格分隔字符串 或 數組元素的形式呈現
> Paper.forEach(callback, thisArg); thisArg為回調函數的上下文環境
為畫布上每個元素執行指定函數，如果回調函數返回false則會停止循環。
例子：
var p = Raphael(20, 20, 300, 400);
p.forEach(function(el){
el.attr({stroke: 'blue'});
});
> Paper.getElementByPoint(x, y); ~~~提供相對於窗口的坐標x,y 返回位於該指定位置的最上層元素
> Paper.getElementsByPoint(x, y); 返回位於指定位置的所有元素集合 x,y是相對於窗口坐標
> Paper.getFont(family, [weight], [style], [stretch])⚓➭
根據指定的參數從注冊字體中獲取字體對象。您可以只指定字體名稱中的一部分，像“Myriad”，“Myriad Pro”
> Paper.getById(id) 返回匹配指定id的元素
> Paper.remove(); 從DOM中刪除畫布
> Paper.renderfix()
修復Firefox和IE9的像素渲染的問題。如果畫布依賴於其他元素，換行后，它可能會移動半像素導致線條失去細節。這個方法解決此問題。
> Paper.safari()
Safari（WebKit）有一個不方便的渲染錯誤：有時需要強制渲染。此方法對於處理此錯誤應該有幫助。
> Paper.set() ~~~創建元素集合 元素的方法都適用元素集合
創建類數組對象，保存和一次操作其中的多個元素。PS: 它不創建任何元素，只是分組已存在的元素。“集合”充當偽元素 - 所有元素可用的方法，都可以在集合上使用。
例子：
var paper = Raphael('test', 300, 300);
var set = paper.set();
set.push(
paper.circle(10, 10, 100);
paper.circle(40,40, 100);
);
set.attr({fill:'blue'}); //~~~隱式迭代
> Paper.setStart() ~~~群組元素
創建Paper.set 。調用此方法之后到調用Paper.setFinish方法之前創建的所有元素都會被添加到集合內。
例子：
paper.setStart();
paper.circle(10, 10, 100);
paper.circle(50, 50, 100);
var set = paper.setFinish();
set.attr({fill:'red'});
> Paper.setFinish()
請參照：Paper.setStart 。此方法結束捕獲並返回元素集合。
> Paper.setSize(width, height); 改變畫布尺寸
> Paper.setViewBox(x, y, w, h, fit) ~~~可視框(類似PHOTOSHOP導航器的紅框，通過調整可視框的位置大小查看屏幕元素)的左上角坐標x,y 和寬高 fit邏輯值 是否想要圖形適應新的邊界框
設置畫布的視框。實際上，你可以通過指定新的邊界來縮放和平移整個畫布。
------------------------- 數據緩存 -------------------------
> Element.data(key, [value]); 添加或檢索與給定的鍵關聯的值。請參照：Element.removeData
~~~ 類似jQuery.fn.data()方法，保存或讀取數據
例子：
for(var i=0; i<5; i++){
var paper = Raphael('sample1', 200, 200);//在id=sample1的元素上 創建畫布
paper.circle(10+15*i, 10, 10)
.attr({"fill": "#000"})
.data("i",i);
.click(function(){
alert(this.data("i")); //事件處理函數內部 this指向元素自身
});
}
> Element.removeData([key]); 刪除元素與指定鍵相關聯的值。如果不提供關鍵，則刪除元素中的所有數據。
------------------------- 元素位置大小變形 -------------------------
> Element.getBBox(isWithoutTransform); 返回指定元素的邊界框
isWithoutTransform : boolean 如果你想得到變換之前的邊界，使用true。默認值為 false。
返回 邊界對象 { x:n, y:n, x2:n, y2:n, width:n, height:n} ~~~ 左上角坐標(x,y) 右下角坐標(x2,y2) 寬 高
> Element.getPointAtLength(length); 返回在指定路徑上指定長度的坐標點。只適用於“路徑”類型的元素。
返回 { x:n, y:n, alpha:切線的角度} ~~~返回路徑上某點的坐標 和 切線角度
~~~~ 元素變形
> Element.rotate(deg, [cx], [cy]) 建議不要使用！使用Element.transform代替。圍繞指定的點旋轉指定角度。
指定角度 和 旋轉中心(默認 形狀中心)
> Element.scale(sx, sy, [cx], [cy]); 建議不要使用。使用Element.transform代替。為元素添加縮放。
水平縮放值 垂直縮放值 縮放中心 cx,cy
> Element.translate(dx, dy); 建議不要使用。使用Element.transform代替。為元素增加平移變換。 deltaX deltaY
>>> Element.transform([tstr]);
為元素增加變換，這是獨立於其他屬性的變換，即變換不改變矩形的x或y。變換字符串跟路徑字符串的語法類似：
"t100,100r30,100,100s2,2,100,100r45s1.5"
每個字母是一個命令。有四個命令：t是平移，r是旋轉，s是縮放，m是矩陣。
也有另類的“絕對”平移、旋轉和縮放：T、R和S。他們不會考慮到以前的變換。例如：...T100,0總會橫向移動元素100px，而...t100,0會垂直移動如果之前有r90。比較以下r90t100,0和r90T100,0的結果。~~~ t以元素自身的坐標方向做平移 T以畫布的坐標方向做平移
所以，上面的例子可以讀作“平移100,100；圍繞100,100旋轉30°；圍繞100,100縮放兩倍；圍繞中心旋轉45°；相對中心縮放1.5倍“。正如你可以看到旋轉和縮放命令的原點坐標為可選參數，默認的是該元素的中心點。
m矩陣接受六個參數。
例子:
var rt = paper.rect(10, 20, 300, 200);
rt.transform('t100,100r45t-100,0'); //參照元素自身的坐標方向 平移100,100 旋轉45度 平移-100,0
rt.transform('...t50,50'); // ... 表示在之前變換基礎上 追加 ~~~...表示已經執行的變換效果
rt.transform('s2...'); //之前補充變換
rt.transform('t50,50...t-50,-50'); //同時 補充和追加變換效果
rt.transform(''); //重置變換 撤銷所有的變換效果
console.log(rt.transform()); //返回變換字符串分割生成的二維數組
----------------------------- 矩陣 -----------------------------
> Matrix.add(a, b, c, d, e, f, matrix) 為現有矩陣增加一個矩陣。
> Matrix.clone();
> Matrix.invert(); 返回矩陣的反轉版本
> Matrix.rotate(a, x, y); 旋轉矩陣
> Matrix.scale(x, [y], [cx], [cy]);
> Matrix.split(); 將矩陣分割成簡單的變換
返回 對象
{
dx: number 水平平移
dy: number 垂直平移y
scalex: number 水平縮放
scaley number 垂直縮放
shear number 剪切
rotate number 旋轉角度
isSimple boolean 是否可以簡單變換代替
}
> Matrix.toTransformString(); 返回轉換字符串
> Matrix.translate(x, y); 平移矩陣
> Matrix.x(x, y); 返回給定點在經過變換之后的x坐標。請參照：Matrix.y
> Matrix.y(x, y);
------------------------ Raphael構造函數對象 -------------------------
> Raphael(...); ~~~創建畫布 用於繪圖 你必須第一步就這么做，該實例將來調用的所有繪圖方法都被綁定到這個畫布。
Raphael(dom|id, width, height, callback) ; 在指定的html元素里創建畫布 callback是創建完畫布的回調函數 ，其上下文對象為新畫布
Raphael(x, y, width, height, callback); 在頁面指定的坐標x,y 處創建畫布
Raphael( array, callback ) array前3個或4個數組元素對應 [containerID,width,height]或[x,y,width,height]。其余數組元素是元素描述{type:類型,<屬性>}）。請參照：Paper.add 。 ~~~~這種方法可以創建畫布的同時添加元素
Raphael( onReadyCallback ); DOM ready事件回調。你也可以使用eve的“DOMLoad”事件。在這種情況下該方法將返回undefined。
例子：
var p1 = Raphael(10, 50, 320, 200);
var p2 = Raphael('id', 320, 200); ~~// (注意：當節點有屬性： dir="rtl"，會從右上角開始創建)
var p3 = Raphael(document.getElementById('id'), 320, 200);
var p4 = Raphael(["id", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
> Raphael.angel(x1, y1, x2, y2, [x3], [y3]); 返回兩個或三個點之間的角度 返回 角度: number
> Raphael.animation(params, ms, [easing], [callback])
創建一個動畫對象可以傳遞給Element.animate或Element.animateWith方法。請參照：Animation.delay和Animation.repeat。
> Raphael.bezierBBox(…)
返回指定三次貝賽爾曲線的邊界框
> Raphael.color(clr) 解析指定顏色字符串並返回包含全部值的顏色對象。{r:.., g:.., b:.., hex:.., error:.., h:.., s:.., v:...}
> Raphael.getColor([value]); value 為亮度值默認0.75 返回顏色的十六進制表示。
每次調用返回色譜中的下一個顏色。要重置回紅色，調用Raphael.getColor.reset
> Raphael.getColor.reset()
復位色譜位置 Raphael.getColor
> Raphael.getRGB(color); 將顏色字符串解析為RGB對象 {r: ,g: ,b: ,hex: ,error:}
> Raphael.rgb(r, g, b); 將RGB值轉換為十六進制顏色
> Raphael.rgb2hsb(r, g, b) 將RGB值轉換為HSB對象。
> Raphael.rgb2hsl(r, g, b)將RGB值轉換為HSL對象。
> Raphael.hsb(h, s, b); HSB值轉換為十六進制顏色。
> Raphael.hsb2rgb(h, s, v); HSB值轉換為RGB對象。
> Raphael.hsl(h, s, l); HSL值轉換為十六進制顏色。
> Raphael.hsl2rgb(h, s, l); HSL值轉換為RGB對象。
> Raphael.deg(deg); 弧度轉角度
> Raphae.rad(deg); 角度轉弧度
> Raphael.easing_formulas⚓➭
對象，其中包含動畫過渡公式。你可以自己擴展。默認情況下，它含有以下過渡：
“linear”（線性）
“<”或“easeIn”或“ease-in” （由慢到快）
“>”或“easeOut”或“ease-out”（又快到慢）
“<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
“backIn”或“back-in”（開始時回彈）
“backOut”或“back-out”（結束時回彈）
“elastic”（橡皮筋）
“bounce”（彈跳）
> Raphael.el ~~~~Element.prototype的別名?
你可以給元素添加自己的方法。當你要修改默認功能或要在一個方法中包裝一些常見的變換或屬性，這很有用。與畫布方法不同，你可以隨時重新定義元素的方法。擴展元素的方法，不會影響元素集合。
例子：
Raphael.el.red = function(){
this.attr({fill:'red'});
}
paper.circle(100,100,200).red();
> Raphael.fn ~~~~Raphael.prototype的別名？paper是構造函數Raphael的實例
你可以為畫布添加你自己的方法。例如：如果你想畫一個餅圖，可以創建自己的餅圖函數然后作為Raphael插件。要這么做，你需要擴展Raphael.fn對象。您應該在Raphael實例被創建之前修改fn對象，否則將沒有任何效果。請注意：Raphael2.0移除了為插件提供命名空間的功能。應該由插件確保命名空間負責保證適當的環境的安全。
例子：
Raphael.fn.arrow = function(x1, y1, x2, y2, size){
return this.path(...);
}
//創建命名空間
Raphael.fn.mystuff = {
arrow: function(){...},
star: function(){...}
}
var paper = Raphael(10, 10, 300,300);
paper.arrow(10, 10, 30, 30, 5).attr({fill: "green"});
paper.mystuff.arrow();
paper.mystuff.star();
> Raphael.format(token, …) ~~~ 類似printf()
簡單的格式化功能。將“ {<number>} “結構替換為相應的參數。
var x = 10, y=20, width=40, height=50;
// 將會繪制一個矩形，它的效果等同於： "M10,20h40v50h-40z"
paper.path("M{0},{1}h{2}v{3}h{4}z", x, y, width, height, -width);
> Raphael.fullfill(token, json)
比Raphael.format更先進一點點的格式化功能。將“ {<name>} “結構替換為相應的參數。
例子：
//將會繪制一個矩形，它的效果等同於： "M10,20h40v50h-40z"
paper.path(Raphael.fullfill("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
x: 10,
y: 20,
dim: {
width: 40,
height: 50,
"negative width": -40
}
}));
> Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)
在給定的三次貝賽爾曲線上查找給定位置的點的坐標。
> Raphael.getPointAtLength(path, length); 返回位於路徑上給定長度的點的坐標。點 {x: , y: , alpha: }
> Raphael.getSubpath(path, from, to); ~~~~靜態功能函數方法化 path.getSubpath(from, to);
從指定路徑獲取一段子路徑，指定起始和結束位置。返回子路徑的路徑字符串
> Raphael.getTotalLength(path); ~~~同上 靜態功能函數方法化為 path.getTotalLength();
返回在指定路徑的長度（像素）。
> Raphael.is(o, type); 代替typeof操作符。 ~~~數據類型判斷
> Raphael.isBBoxIntersect(bbox1, bbox2); 返回true ，如果兩個邊界框相交
> Raphael.isPointInsideBBox(bbox, x, y); 返回true，如果給定的點在邊界框內。
> Raphael.isPointInsidePath(path, x, y); 返回true，如果指定的點在給定的封閉路徑內。
> Raphael.mapPath(path, matrix); 用指定矩陣變換路徑
> Raphael.matrix(a,b,c,d,e,f); 用指定的參數生成矩陣
> Raphael.ninja() 返回：object Raphael對象 ~~~調用該方法后 全局環境中將沒有Raphael這個構造函數。
如果你不想保留Raphael的痕跡（Raphael只創建一個全局變量Raphael），可使用ninja方法。請注意，在這種情況下，插件可能會停止工作，因為它們依賴全局變量的存在。
用法
(function (local_raphael) {
var paper = local_raphael(10, 10, 320, 200);
…
})(Raphael.ninja());
> Raphael.parsePathString(pathString); ~~~解析路徑字符串 為一個路徑段數組
將指定路徑字符串解析成一個數組，其中的元素是路徑段數組。
> Raphael.parseTransformString(TString); ~~~解析指定路徑字符串為變換數組。
> Raphael.path2curve(pathString); 將指定路徑轉換為新路徑，新路徑的所有片段都是三次貝賽爾曲線。
> Raphael.pathBBox(path); 返回指定路徑的邊界框
> Raphael.pathIntersection(path1, path2); 查找兩條路徑的交點
> Raphael.pathToRelative(pathString); 將路徑轉換為相對形式 路徑段數組組成的數組
> Raphael.registerFont(font)
給Raphael字體注冊指定字體。應當作為Cufón字體文件的內部調用。返回原來的參數，所以它可以鏈式操作。
> Raphael.setWindow(newwin); 需要在<iframe>繪制時使用。切換窗口為iframe。newwin為新的窗口對象
> Raphael.snapTo(values, value, tolerance); 將給定值對齊到指定網格。
> Raphael.st ~~~Set.prototype的別名？ 給元素自定義方法后 最好也給集合定義一個相同方法以便直接在集合上隱式迭代
你可以為元素和集合添加自己的方法。為給元素添加的每個方法寫一個集合方法是明智的，你就可以在集合上調用同樣的方法。請參照：Raphael.el 。
例子：
Raphael.el.red = function(){
this.attr({fill: 'red'});
};
Raphael.st.red = function(){
this.forEach(function(el){ el.red(); });
};
paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();
> Raphael.svg ~~~檢測瀏覽器是否支持svg 如果瀏覽器支持SVG則為true。
> Raphael.type ~~~返回Raphel用什么方式繪圖 可以是“SVG”，“VML”或為空，依賴於瀏覽器的支持。
> Raphael.vml ~~~true，如果瀏覽器支持VML。ie支持vml chrome不支持
> Raphael.transformPath(path, transform); 返回指定路徑經過指定變換后的路徑
--------------------------- Set 集合 ----------------------------
> Set.clear(); 移除集合中的全部元素
> Set.exclude(element); 從集合中刪除指定元素 返回true，如果對象存在並且 已經被刪除
> Set.forEach(callback, thisArg) 為集合中的每個元素執行指定函數。如果函數返回false則停止循環運行。
> Set.pop(); ~~類似數組的方法 刪除最后一個元素並返回它。
> Set.push(); 加入一個元素
> Set.splice(index, count, [insertion]); 從集合中插入/刪除/替換指定元素