这节我们将介绍Raphaeljs中元素的属性和事件,案例还是以上一篇的代码展开
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Script/raphael.js"></script> </head> <body> <div id="paper"> </div> <script> //创建一个画布 var paper = new Raphael("paper", 500, 500); //画圆 var circle = paper.circle(50, 50, 40); circle.attr({ "stroke": "red", "stroke-width": 4, "fill": "blue" }); //或者写法 circle.attr("opacity",0.5); //画圆角方形 var rect = paper.rect(90, 90, 50, 50, 10); </script> </body> </html>paper中给元素加入属性是使用attr方法,能够一次加入多个,也能够单个加入。
元素的属性有下面:
cursor (光标颜色),cx,cy (园或者椭圆 圆心点坐标),fill(填充颜色),fill-opacity (滤镜),font,font-family,font-size,font-weight,height
href,opacity,path,src,stroke,stroke-dasharray,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width
target,text,text-anchor,title,transform,width,x,y等等
假设是想设置元素的style的话能够使用element.node属性来获得当前元素解析到浏览器中之后的标签,然后再使用jquery进行设置。
元素的事件:
Raphaeljs元素一般具有例如以下事件:
1.click 单击事件;
2.dbclick 双击事件。
3.drag事件,元素拖动事件;
3.hide 隐藏事件;
4.hover 悬浮事件;
5.mousedown 鼠标按下
6.mouseout 鼠标移出事件
7.mouseover ,mouseup 送掉事件。
解除事件的方式例如以下:
1.unclick
2.undbclick
3.unmousedown
4.等等在绑定事件的词前面加上前缀词un即可了。
当然元素事件和属性也是通过元素.node来设置。
以下我们详细看一个案例,当鼠标移入圆的时候改变圆的填充颜色,移出的时候又恢复原来的颜色
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Script/raphael.js"></script> </head> <body> <div id="paper"> </div> <script> //创建一个画布 var paper = new Raphael("paper", 500, 500); //画圆 var circle = paper.circle(50, 50, 40); circle.attr({ "stroke": "red", "stroke-width": 4, "fill": "blue" }); circle.mousedown(function () { circle.attr("fill", "red"); }); circle.mouseup(function () { this.attr("fill", "blue"); }); //或者写法 circle.attr("opacity", 0.5); //画圆角方形 var rect = paper.rect(90, 90, 50, 50, 10); rect.attr({ "stroke": "red", "stroke-width": 4, "fill": "blue" }); rect.attr("opacity", 0.5); rect.mousemove(function () { rect.attr("fill", "gray"); }); rect.mouseout(function () { this.attr("fill", "blue"); }); </script> </body> </html>
效果图例如以下: