Raphael

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 命令翻译过来就是：

对象水平方向平移 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>

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