1. 元素属性设置
Eelement.attr({params键值对});或.Eelement.attr(属性名,属性值);
为元素设置属性。常用属性有:
stroke:画笔颜色 stroke-width:画笔宽度
fill:元素填充颜色 fill-opacity:填充不透明度
cx:圆或椭圆圆心x轴坐标 cy:圆或椭圆圆心y轴坐标
font:文本对象 font-size:字体大小
font-family:字体类型 font-weight:字体粗细
text:文本元素的内容 r:圆或椭圆或圆角矩形的半径
rx:椭圆的水平半径 ry:椭圆的垂直半径
src:图片路径 title:提示文本
hsb(h,s,b):色相,饱和度,亮度值
rgb(r,g,b):红,绿,蓝色的通道值
2.元素无参方法
Element.hide():隐藏元素
Element.show():显示元素
Element.clone():克隆元素
Element.remove():移除元素
Element.toFront():将元素向上移动
Element.toBack():将元素向下移动
Element.insertAfter():在指定元素后插入当前元素
Element.isnertBefore():在指定对象前,插入当前对象
3.元素节点使用
Element.id:获取元素唯一ID
Element.matrix:返回一个矩阵对象,是元素变形的一种方式
Element.paper:画布对象的内部引用
Element.raphael:Rapahel对象的内部引用
Element.next:层次结构中下一个元素的引用
Element.prev:层次结构中上一个元素的引用
Element.node:DOM对象的引用
4.元素的事件使用
Element.click(handler):单击事件
Element.dbclick(handler):双击事件
Element.mousedown(handler):鼠标按下事件
Element.mouseup(handler):鼠标抬起事件
Element.mousemove(handler):鼠标移动事件
Element.mouseout(handler):鼠标移开事件
Element.mouseover(handler):鼠标移入事件
Element.touchstart(handler):触摸开始事件
Element.touchmove(handler):触摸移动事件
Element.touchend(handler):触摸结束事件
Element.touchcancel(handler):触摸作废事件
Element.drag(onmove,onstart,onend[mcontext],[scontext],[econtext]):拖拽事件
其中,onmove,onstart,onend分别为拖拽中,拖拽开始,拖拽结束处理函数
mcontext,scontext,econtext分别为上面事件处理的环境
注意当元素包含,x,y,event时将触发拖拽事件
Element.hover(f_in,f_out,icontext,ocontext):悬停事件
其中,f_in:悬停进入处理的句柄函数
f_out:悬停结束处理的句柄函数
icontext,ocontext是上面处理函数的环境
注意:所有的事件都有对应的移除事件,方法名为:un+事件名
演示效果:
效果说明:当鼠标悬停在圆上时,圆的颜色为绿色,鼠标悬停在其他地方时,圆的颜色为红色,点击圆时,显示文字。
初始效果图:
最终效果图:
需要注意的是:raphael的事件在谷歌浏览器上无效。