Rahael学习之Element API(七)

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的事件在谷歌浏览器上无效。