码迷,mamicode.com
首页 > Web开发 > 详细

Raphaeljs入门到精通(二)

时间:2014-08-25 17:02:54      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:raphael   元素属性   元素事件   

这节我们将介绍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>

效果图如下:

bubuko.com,布布扣

bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣


Raphaeljs入门到精通(二)

标签:raphael   元素属性   元素事件   

原文地址:http://blog.csdn.net/zhangyuanwei88/article/details/38821793

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!