raphael入門到精通---屬性和事件篇

屬性的使用

上一篇文章咱們介紹了raphael如何生成基本的圖形（元素）,對於每一個元素來說，咱們能夠添加不少的元素（attr）

下面我就來簡單的介紹下元素屬性的使用（path元素屬性我後面單獨列出來介紹）

添加屬性的方法是attr()，它有四種傳值方式

1. attrName,value 不解釋
2. params(一個json對象)
3. attrName 傳入一個屬性名字它將返回對應的值，很想jquery把
4. attrNames(數組) 返回對應的數組中屬性對應的值

夠簡單吧，如今來看下有多少屬性（這些屬性能夠參考SVG方面），實際上不少屬性使用是和CSS同樣的

fill:屬性的填充 好比能夠用顏色，圖片，漸變表示也能夠的

stroke : 畫筆的顏色

stroke-dasharray : 定義畫筆的虛線

stroke-linecap : 線條末端控制圖形

stroke-linejoin : 畫筆轉折處鏈接點的畫風

arrow-end : path結尾的箭頭形狀

path: 　M = moveto(M X,Y) ：將畫筆移動到指定的座標位置
　　　　L = lineto(L X,Y) ：畫直線到指定的座標位置
　　　　H = horizontal lineto(H X)：畫水平線到指定的X座標位置
　　　　V = vertical lineto(V Y)：畫垂直線到指定的Y座標位置
　　　　C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次貝賽曲線
　　　　S = smooth curveto(S X2,Y2,ENDX,ENDY)
　　　　Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次貝賽曲線
　　　　T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
　　　　A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
　　　　Z = closepath()：關閉路徑

　　　　重點介紹下A

RX,RY指所在橢圓的x和y軸
XROTATION指橢圓繞中心點順時針旋轉XROTATION的角度。
FLAG1只有兩個值，1表示大角度弧線，0爲小角度弧線。
FLAG2只有兩個值，肯定從起點至終點的方向，1爲順時針，0爲逆時針
X,Y爲終點座標

事件的使用

對每一個元素來說，都有對應的事件以下

click ,dbclick ,drag ,hover,mouseover,mousedown ,mouseup,mousemove,mouseout等事件

總結

對於raphael來講基本的元素屬性都介紹完了。從下一張開始，咱們就開始學習API以及一些高級用法，固然了，天然包含raphael官網的demo實例剖析