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

效果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd5dWFud2VpODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

Raphaeljs入门到精通（二）的更多相关文章

  1. iOS开发-UI 从入门到精通(二)

    iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...

  2. Python基本语法，python入门到精通[二]

    在上一篇博客Windows搭建python开发环境,python入门到精通[一]我们已经在自己的windows电脑上搭建好了python的开发环境,这篇博客呢我就开始学习一下Python的基本语法.现 ...

  3. PHP从入门到精通(二)

     PHP从入门到精通 之PHP中的函数 各位开发者朋友大家好,自上次更新PHP的相关知识,得到了大家的广泛支持.PHP的火爆程度不言而喻,函数作为PHP中极为重要的部分,应诸位的支持,博主继续跟进更新 ...

  4. MyBatis从入门到精通(二)：MyBatis XML方式的基本用法之Select

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. 明确需求 书中提到的需求是一个基 ...

  5. Raphaeljs入门到精通（一）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. SpringBoot从入门到精通二(SpringBoot整合myBatis的两种方式)

    前言 通过上一章的学习,我们已经对SpringBoot有简单的入门,接下来我们深入学习一下SpringBoot,我们知道任何一个网站的数据大多数都是动态的,也就是说数据是从数据库提取出来的,而非静态数 ...

  7. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  8. MyBatis 入门到精通(二) SQL语句映射XML文件

    MyBatis 真正强大之处就在这些映射语句,也就是它的魔力所在.对于它的强大功能,SQL 映射文件的配置却非常简单. 如果您比较SQL 映射文件配置与JDBC 代码,您很快可以发现,使用SQL 映射 ...

  9. Atom编辑器入门到精通(二) 插件的安装和管理

    在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...

随机推荐

  1. Flume NG基本架构与Flume NG核心概念

    导读 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中. 由原来的Flume OG到现在的Flume NG, ...

  2. System.Data.SqlClient.SqlException: 在向服务器发送请求时发生传输级错误。 (provider: TCP 提供程序, error: 0 - 远程主机强迫关闭了一个现有的连接。) .

    今天使用sql server 2008 R2管理器,进行SQL查询时,频率非常高的报错: System.Data.SqlClient.SqlException: 在向服务器发送请求时发生传输级错误. ...

  3. 兼容浏览器 div固定浏览器窗口底部 浮动div

    css内容: <style type="text/css"> #ken_BB { padding-right:30px; text-align: center; col ...

  4. SVN异常处理(五)-状态小图标不见了

    1.发现问题 装了Win10,再装了Office2016等一些最新软件后,发现SVN状态小图标竟然就不见了 2.分析问题 在Window系统中,当UAC启动时,有些应用程序的图标上会显示一个盾牌,像这 ...

  5. 移动web——bootstrap如何修改原组件

    基本介绍 1.bootstrap提供了丰富的组件,但是有时候我们不仅要删除不必要的标签,还需要修改里面的样式 2.我们建议若是修改样式那么最好将源样式从css中拷贝出来,名字换掉,然后修改具体样式,这 ...

  6. JS——select标签

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. CSS——padding

    padding是盒子内容与边框的距离. padding:10px;/*上下左右都是10px*/ padding:10px 20px;/*上下是10px 左右是20px*/ padding:10px 2 ...

  8. Python语言之模块

    模块基本上就是一个包含了所有你定义的函数和变量的文件.它用处在于使你你能在别的程序中重用它提供的功能和服务. 1.模块的使用方法 模块的文件名必须以.py作为扩展名. 当我们需要使用某个模块时,我们需 ...

  9. Centos6.6 安装nfs网络文件系统

    一.介绍 nfs网络文件系统的,大部分用在内网文件共享,比如,对集群上传文件做共享,经常用在图片部分,当然数据量大了还是要做分离,做为专门的接口比较好,介绍一下基本安装环境: 1)Cnetos6.6 ...

  10. C# 返回值为 list<T>

    public List<T> test<T>(List<T> EntityList) where T : class { return EntityList; }