屬性的使用
上一篇文章我們介紹了raphael如何生成基本的圖形(元素),對於每個元素來講,我們可以添加很多的元素(attr)
下面我就來簡單的介紹下元素屬性的使用(path元素屬性我后面單獨列出來介紹)
添加屬性的方法是attr(),它有四種傳值方式
- attrName,value 不解釋
- params(一個json對象)
- attrName 傳入一個屬性名字它將返回對應的值,很想jquery把
- 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實例剖析