首页 » 技术分享 » Raphael.js简易教程

Raphael.js简易教程

　
评论关闭　950次浏览 
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>

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

    Reference

本文出自：http://www.zfanw.com/blog, 原文地址：http://www.zfanw.com/blog/raphael-js-tutorial.html, 感谢原作者分享。

转载自原文链接, 如需删除请联系管理员。

原文链接：Raphael.js简易教程，转载请注明来源！

赞 0