这节我们将介绍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>
效果图如下：
原文地址：http://blog.csdn.net/zhangyuanwei88/article/details/38821793
