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實例剖析


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM