raphael 介绍

22 Nov 2011 in Web前端 on extjs4, raphael - Hits()

对于无插件web chart，不久前还是头疼的事情，大部分解决方案是flash,包括extjs3。当前extjs4出来了，发现它是封装了vml和svg。虽然extjs4是基于沙箱的，可以和extjs3合用，但是我试过了，那性能是惨不忍睹。

我看到jquery的chart插件flot http://code.google.com/p/flot/, 但是它是使用canvas的，对于ie使用excanvas来包装,但是在我的ie浏览器中就报错了。

让我们看看raphael,它是封装了vml和svg,而且，extjs4的chart也是基于它的！所以，完全可以使用raphael来画图！

它的接口是按照svg来设计的，所以会参考到 w3c svg文档 http://www.w3.org/TR/SVG/painting.html

首先创建一个raphael对象:

var r = Raphael('holder', 500, 300);

上面的代码在页面的holder元素下创建了一个Paper对象。

下面画一条线: Paper.path

r.path('M0,0,L200,200');

这里画了一个斜线，从画布原点，也就是左上角向坐标200,200处画线。其中的M表示将画笔起点移动到,L表示向某处画线。这是svg的语法，可参见: http://www.w3.org/TR/SVG/paths.html#PathData

上面的代码返回的是Element对象。

然后我们来为这条线添加颜色:Element.attr

r.path('M0,0,L200,200').attr({stroke:'red','stroke-width':'5px'});

使用attr方法将画笔属性设置成红色和5像素宽。

效果如图:

我们再画个三角形:

r.path('M{0},{1},L{2},{3}L{4},{5}Z',0,100,50,150,0,200).attr({fill:'blue'});

注意到，使用path的另外的形式，使用大括号中的参数来生成语句。其中的索引分别对应后面的参数位置。更多的格式见Raphael.format。另外我们指定了三个顶点，最后一个Z表示将此路径封闭。然后我们使用蓝色来填充这个封闭的三角形。

我们再来写上文本：

r.text(100,90,'Hello!').attr({stroke:'black','stroke-width':'2px',fill:'green','font-size':'90px'});

在上面的代码中，我们在100,90坐标处，写上了hello的文本。它是用2px黑色外框，绿色填充，90px大小的字体来绘制的。

完整的代码是:

html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="raphael.js"></script>

	<script type="text/javascript" src="test.js"></script>
  </head>
  
  <body>
    <div id="holder"></div>
  </body>
</html>

javascript代码:

(function(){
	window.onload = function(){
		var r = Raphael('holder', 500, 300);
		
		r.path('M0,0,L200,200').attr({stroke:'red','stroke-width':5});
		
		r.path('M{0},{1},L{2},{3}L{4},{5}Z',0,100,50,150,0,200).attr({fill:'blue'});
		
		r.text(100,90,'Hello!').attr({stroke:'black','stroke-width':'2px',fill:'green','font-size':'90px'});
	};	
})();

然后可以通过文档画出更多有趣的图形了！

也有这个想法，使用它来创建动画：

svg的zindex是没有的，依据出现的顺序来模拟zindex,即最后出现的svgzindex最高。

raphael可以绘制图片。

raphael有animation方法。

使用每帧重新构造完整svg的方法是不行的，对于fps>1的情况，就相当的卡了。在fps<1的情况下还可以。故还是要使用animation。

最近发现ie8中image方法绘出的图不正常，这里有人做了改动https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/HqfgNIHH1NE

the first is on line 5020 ://o._.fillsize = [a.width, a.height];

the second is on line 5645 and 5647:

5645,add code : fill.size=w+"px,"+h+"px";

5647, comment code ://res._.fillsize = [w, h];

实现是可行的解决方案。

这里是基于4.0修改后的代码:raphael.js

A（弧）的语法是：

rx ry x-axis-rotation large-arc-flag sweep-flag x y

一共7个数值，下面解释一下数值的含义：

rx ，ry 是弧的半长轴，半短轴长度

x-axis-rotation 是此段弧所在的 x 轴与水平方向的夹角，即 x 轴的旋转角度

large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线

sweep-flag , 1 代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向

x,y 是弧终端坐标