- Raphael.js 的教程非常简单,仅首页一段代码,然后就是 Reference。但作者在 Reference 部分也惜墨如金,不肯多费几句。所以有这一篇中文,对如何使用 Raphael.js 做个简单介绍。
- 调用 Raphael.js
- 首先在 HTML 页面调用 raphael.js:
- <script src="http://www.zfanw.com/blog/raphael.js"></script>
- 用法
- 用 Raphael 方法创建一块画布,
- var paper = Raphael(10, 50, 320, 200);//在浏览器窗口中,坐标 (10,50) 位置创建一个 canvas 对象,长320px,宽200px。
- 我们随后的操作都将在这块画布上进行。
- 绘制基本图形
- 比如,以 (100,100) 为中心画半径50px的圆,并填充红色:
- var circle=paper.circle(100,100,50);
- circle.attr({"fill":"red"}); //attr 方法用于设定对象属性
- 如你所见,这个半径50的圆跑到页面左上。这是因为画布的坐标原点在浏览器窗口左上角。
- 但 Raphael 方法还可以在 HTML 元素中创建画布,这就避开上面的问题:
- <div id="raphael1"></div>
- <script>
- var paper=Raphael("raphael1",320,200);//在 id 为 raphael1 元素中创建画布
- var circle=paper.cicle(100,100,50);
- circle.attr({"fill":"green"});
- </script>
- 代码效果如下:
- 除了圆(circle)外,Raphael.js 还提供其他常规图形方法,比如方形(rect)、椭圆(ellipse)、路径(path)等。
- 修改对象属性
- 在画布上创建 Raphael 对象后,我们可以修改对象属性。
- 比如,先使用 text 方法生成文字,然后修改字体大小为30px,填充蓝色,红色描边,透明度50%:
- 代码如下:
- <div id="raphael2"></div>
- <script>
- (function(){
- var paper=Raphael("raphael2",300,300);
- var t=paper.text(150,150,"Hello from 陈三");
- t.attr({"font-size":"30px","fill":"blue","stroke":"red","opacity":".5"});
- })();
- </script>
- 这一切都是通过 Raphael 对象的 attr 方法完成。
- 变换对象
- 除了修改对象属性,我们还可以变换(transform)对象,比如平移、旋转、缩放。
- 上图中的代码如下(虚线为图形变换前):
- <div id="raphael3"></div>
- <script>
- (function(){
- var paper=Raphael("raphael3",200,200);
- var rect=paper.rect(50,50,100,100,5);
- rect.attr({"stroke-dasharray":"-"});
- rect.transform("t100,100r45t-100,0s.5");
- })();
- </script>
- Raphael 对象变换有四个命令:
- t – translate
- r – rotate
- s – scale
- m – matrix
- 上例中 t100,100r45t-100,0s.5 命令翻译过来就是:
- 对象水平方向平移100
- 垂直方向平移100
- 旋转45度
- 水平方向往负方向平移100
- 缩小图形到原来的一半
- 动画效果
- 上面说到修改对象属性和变换对象,因为有开始和结束两个状态,我们就可以制作动画效果。
- 上图的代码如下:
- <div id="raphael4"></div>
- <script>
- (function(){
- var paper=Raphael("raphael4",400,300);
- var circle=paper.circle(200,150,100);
- circle.attr({"fill":"red"});
- circle.animate({cx: 10, cy: 20, r: 8, "fill": "blue"}, 10e3);
- })();
- </script>
- 圆心的初始坐标(200,130),半径100,填充红色,页面加载完成后,圆心坐标变成(cx,cy),即(10,20),半径缩为8,填充蓝色,这个变化过程时长为10e3毫秒,即10秒 – 如果你没有看到动画效果,那是因为动画已经结束,请刷新页面,然后跳转到这一部分。
- 绑定事件
- Raphael.js 还可以给对象绑定事件,比如单击、双击、拖动、鼠标移入、鼠标移出等。
- 举 hover 方法为例:
- 代码如下:
- <div id="raphael5"></div>
- <script>
- (function(){
- var paper=Raphael("raphael5",400,300);
- var circle=paper.circle(200,150,100);
- circle.attr({"fill":"red"});
- circle.hover(function(){circle.attr({"fill":"green"});},function(){circle.attr({"fill":"red"});});//给 circle 对象绑定 hover 事件
- })();
- </script>
相关推荐
raphael.draggable.js,是给raphael.js扩展的拖拽功能。画布整体拖动,还原,以及单独元素拖动。raphael.extension.js
raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;raphael.min.js;
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
raphael.js
最新的raphael.js文件,因为官网不支持下载,需要拷贝并转码,所以偷懒下,做个文件放这边,有需要的尽管拿吧
raphael.js做的一个动画效果 有动画特效 可以缩放 、
raphael.min.v2.2.1.js,从官网下载,特地分享,1个积分不多,下载不到吃亏,下载不到上当。
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
临时简单弄的,通过raphael.js布置循环关系的数组,其它的拓扑图美观是美观,可惜布局太分散,定位太随机,有点强迫症的处女座弄了个简单的紧凑布局,为了连接箭头和线条,牺牲了部分空间,竖起大于1行,横起设定为大于1的...
Raphael.js 2.21版源码 以及快速上手手册 矢量图绘制工具,兼容IE8
raphael-min.js
Raphael.js PDF文档,说明Raphael.js的优点与D3的区别,以及由浅入深的范例
raphael.js实例
comic.js, 用于 HTML5 Canvas & Raphael.js & D3.js & SVG.js的卡通样式图 comic.jsJavascript库,用作 Raphael.js,D3.js, SVG.js 或者作为 HTML5 Canvas 插件的插件,提供动画样式绘制的功能。 请在 comic.js ...
为了明天的工作,我跑遍了很多的网站,收集整理出来的柱状图
利用Raphael.js绘制气泡墙,气泡从下往上飘动。气泡上可以自定义文字。
基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成...