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

转载于:https://www.cnblogs.com/jsepc01-/p/5155600.html