Raphael.js简易教程

阅读更多

1. Raphael.js 的教程非常简单，仅首页一段代码，然后就是 Reference。但作者在 Reference 部分也惜墨如金，不肯多费几句。所以有这一篇中文，对如何使用 Raphael.js 做个简单介绍。  
2. 调用 Raphael.js  
3.   
4. 首先在 HTML 页面调用 raphael.js：  
5.   
6. <script src="http://www.zfanw.com/blog/raphael.js">script>  
7.   
8. 用法  
9.   
10. 用 Raphael 方法创建一块画布，  
11.   
12. var paper = Raphael(10, 50, 320, 200);//在浏览器窗口中，坐标 (10,50) 位置创建一个 canvas 对象，长320px，宽200px。  
13.   
14. 我们随后的操作都将在这块画布上进行。  
15. 绘制基本图形  
16.   
17. 比如，以 (100,100) 为中心画半径50px的圆，并填充红色：  
18.   
19. var circle=paper.circle(100,100,50);  
20. circle.attr({"fill":"red"}); //attr 方法用于设定对象属性  
21.   
22. 如你所见，这个半径50的圆跑到页面左上。这是因为画布的坐标原点在浏览器窗口左上角。  
23.   
24. 但 Raphael 方法还可以在 HTML 元素中创建画布，这就避开上面的问题：  
25.   
26. <div id="raphael1">div>  
27. <script>  
28.     var paper=Raphael("raphael1",320,200);//在 id 为 raphael1 元素中创建画布  
29.     var circle=paper.cicle(100,100,50);  
30.     circle.attr({"fill":"green"});  
31. script>  
32.   
33. 代码效果如下：  
34.   
35. 除了圆(circle)外，Raphael.js 还提供其他常规图形方法，比如方形(rect)、椭圆(ellipse)、路径(path)等。  
36. 修改对象属性  
37.   
38. 在画布上创建 Raphael 对象后，我们可以修改对象属性。  
39.   
40. 比如，先使用 text 方法生成文字，然后修改字体大小为30px，填充蓝色，红色描边，透明度50%：  
41.   
42. 代码如下：  
43.   
44. <div id="raphael2">div>  
45. <script>  
46. (function(){  
47.     var paper=Raphael("raphael2",300,300);  
48.     var t=paper.text(150,150,"Hello from 陈三");  
49.     t.attr({"font-size":"30px","fill":"blue","stroke":"red","opacity":".5"});  
50. })();  
51. script>  
52.   
53. 这一切都是通过 Raphael 对象的 attr 方法完成。  
54. 变换对象  
55.   
56. 除了修改对象属性，我们还可以变换(transform)对象，比如平移、旋转、缩放。  
57.   
58. 上图中的代码如下(虚线为图形变换前)：  
59.   
60. <div id="raphael3">div>  
61. <script>  
62. (function(){  
63.     var paper=Raphael("raphael3",200,200);  
64.     var rect=paper.rect(50,50,100,100,5);  
65.     rect.attr({"stroke-dasharray":"-"});  
66.     rect.transform("t100,100r45t-100,0s.5");  
67. })();  
68. script>  
69.   
70. Raphael 对象变换有四个命令：  
71.   
72.     t – translate  
73.     r – rotate  
74.     s – scale  
75.     m – matrix  
76.   
77. 上例中 t100,100r45t-100,0s.5 命令翻译过来就是：  
78.   
79.     对象水平方向平移100  
80.     垂直方向平移100  
81.     旋转45度  
82.     水平方向往负方向平移100  
83.     缩小图形到原来的一半  
84.   
85. 动画效果  
86.   
87. 上面说到修改对象属性和变换对象，因为有开始和结束两个状态，我们就可以制作动画效果。  
88.   
89. 上图的代码如下：  
90.   
91. <div id="raphael4">div>  
92. <script>  
93. (function(){  
94.     var paper=Raphael("raphael4",400,300);  
95.     var circle=paper.circle(200,150,100);  
96.     circle.attr({"fill":"red"});  
97.     circle.animate({cx: 10, cy: 20, r: 8, "fill": "blue"}, 10e3);  
98. })();  
99. script>  
100.   
101. 圆心的初始坐标(200,130)，半径100，填充红色，页面加载完成后，圆心坐标变成(cx,cy)，即(10,20)，半径缩为8，填充蓝色，这个变化过程时长为10e3毫秒，即10秒 – 如果你没有看到动画效果，那是因为动画已经结束，请刷新页面，然后跳转到这一部分。  
102. 绑定事件  
103.   
104. Raphael.js 还可以给对象绑定事件，比如单击、双击、拖动、鼠标移入、鼠标移出等。  
105.   
106. 举 hover 方法为例：  
107.   
108. 代码如下：  
109.   
110. <div id="raphael5">div>  
111. <script>  
112. (function(){  
113.     var paper=Raphael("raphael5",400,300);  
114.     var circle=paper.circle(200,150,100);  
115.     circle.attr({"fill":"red"});  
116.     circle.hover(function(){circle.attr({"fill":"green"});},function(){circle.attr({"fill":"red"});});//给 circle 对象绑定 hover 事件  
117. })();  
118. script>