這節我們將介紹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>
元素的屬性有以下：
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>
效果圖如下：
