2 min read

Raphael.js 教程

Raphael.js 官网的教程非常简单,仅首页一段代码,其它就是 Reference。但作者在 Reference 部分也惜墨如金,不肯多费几句。所以这一篇,简单介绍如何使用 Raphael.js 。

调用

两种方式:

  1. script 标签,如下:

    <script src="raphael.js"></script>
    
  2. AMD 规范的加载方式,如下:

    define([ "path/to/raphael" ], function( Raphael ) {
      console.log( Raphael );
    });
    

用法

Raphael 方法创建一块画布,

// 在浏览器窗口中,坐标 (10, 50) 位置创建一个 canvas 对象,长 320px,宽 200px。
var paper = Raphael(10, 50, 320, 200);

我们随后的操作都在这块画布上。

绘制基本图形

比如,以画布坐标 (50,100) 为中心,画一个半径 50px 的圆,并填充红色:

var circle = paper.circle(50, 100, 50);
circle.attr({"fill":"red"}); // attr 方法用于设定对象属性

另外,Raphael 方法还可以在 HTML 元素中创建画布:

<div id="raphael1"></div>
<script>
    //在 id 为 raphael1 元素中创建画布
    var paper = Raphael("raphael1", 320, 200);
    var circle = paper.circle(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 对象变换有四个命令:

  1. t – translate
  2. r – rotate
  3. s – scale
  4. m – matrix

上例中 t100,100r45t-100,0s.5 命令翻译过来就是:

  1. 对象水平方向平移 100
  2. 垂直方向平移 100
  3. 旋转 45 度
  4. 水平方向往负方向平移 100
  5. 缩小图形到原来的一半

动画效果

上面说到修改对象属性和变换对象,因为有开始和结束两个状态,我们就可以制作动画效果。

上图的代码如下:

<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>

上例中,鼠标放到圆上,填充色变成绿色,移开恢复成红色。

参考

  1. Reference

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo