这节我们将介绍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>
效果图如下: