Rahael学习之Element API(七)

来源:互联网 发布:淘宝整机烈士墙 编辑:程序博客网 时间:2024/06/16 06:14

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


0 0
原创粉丝点击