官方介绍：
Raphael是由Dmitry Baranovskiy开发的小型Javascript类库，它可以让你在web上很容易地使用矢量图形。如果你需要制作自定义图表或图像裁剪旋转控件，它也可以让你更方便、简单地进行实现。Raphael使用W3C推荐的SVG以及VML两种矢量标记语言来实现绘图，这意味着，你创建的图形对象都是DOM元素，你可以给它们绑定、移除javascript事件。Raphael的目标是提供一个适配工具，实现简单、跨浏览器兼容的图形绘制。Raphael兼容Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
在WEB端，可供选择的图形绘制技术并不多。Flash曾是这一领域的老大，但现在已经开始没落，不建议采用。Canvas随着HTML5的大热而崛起，但是由于大家都了解的种种原因，比如兼容性的问题，目前Canvas对大部分项目来说还不太适用。实际上，SVG在兼容性上的表现并不比Canvas强多少，所以像D3.js这种强大的SVG绘制类库，在国内也没有太多项目会使用。相比之下，RaphaelJs更符合我们的需求，虽然它默认也是绘制SVG，但如果遇到不支持SVG的浏览器，比如低版本IE，它会改用VML来绘制图形，而IE5.5以上版本都支持VML，所以RaphaelJs的兼容性非常好。（提高兼容性也是有代价的，在一些落后的浏览器上，性能会是一个非常严重的问题。）
首先简单介绍一下SVG和VML，二者都是标记语言，而且可以直接嵌入HTML，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> example </title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"]]>
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
</body>
</html>
绘制SVG，先要插入一个svg标签，然后在svg标签内部插入更多标签，用来表示各种图形。
这里的rect标签表示矩形，circle标签表示圆形，text标签表示文字（矢量文字）。
和HTML标签一样，SVG的标签实际上也可以视为DOM节点，并用JavaScript获取或改变它们。
比如给上面的代码增加一段脚本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> example </title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
<script type="text/javascript">
/*
获取svg节点
创建一个rect节点
将新的rect节点插入到svg里面
*/
var svg1 = document.getElementsByTagName('svg')[0],
newRect = document.createElement('rect');
svg1.appendChild(newRect);
</script>
</body>
</html>
VML的情况和SVG类似，这里不再重复。原生的JavaScript当然也能绘制SVG和VML，但是写起来比较麻烦，而RaphaelJs提供了很好的封装，让我们写起来更方便。所以RaphaelJs有点像jQuery，jQuery封装了很多HTML的dom操作，而RaphaelJS封装的则是SVG和VML的DOM操作。
加载
RaphaelJs的官网提供了库文件的下载，89Kb的是压缩版，源码文件是221Kb。
和载入其他类库一样，RaphaelJs的加载很简单：
<script type="text/javascript" src="raphael-min.js"></script>
如果你使用sea.js，可以用spm直接下载已经模块化的RaphaelJs文件：
spm install gallery.raphael@2.1.0
创建画布
在jQuery里，jQuery()方法是一个非常强大的基本方法，它可以用来选择各种元素，也可以用来设置domReady的回调函数。
RaphaelJs也有一个类似的函数：Raphael()，这个函数也可以设置domReady的回调函数，但是，它的主要作用还是创建画布：
//在div1里创建一个宽300px、高200px的画布。
//div1是dom节点的ID
var paper = Raphael(‘div1’, 300, 200);
//如果在一个没有ID的元素里创建画布
//可以先获取该元素，然后作为参数传给Raphael()
//eg:
var div1 = document.getElementsByTagName('div')[0],
paper = Raphael(div1, 300, 200);
Raphael()方法的返回值是一个画布对象，通过该对象可以调用各种绘图方法。
上面我们已经创建了画布，并且将变量paper指向了画布对象，接下来，我们就可以调用画布对象的各种方法进行绘图了。
在RaphaelJs里，用来绘制形状的方法不算多，比较容易掌握。
矩形
参数：x轴坐标，y轴坐标，宽度，高度
paper.rect(x, y, width, height);
圆形
参数：圆心的x轴坐标，y轴坐标，圆半径
paper.circle(x, y, r);
椭圆
参数：圆心的x轴坐标，y轴坐标，x轴半径，y轴半径
paper.ellipse(x, y, xr, yr);
路径
paper.path('M10,10 L20,20');
图片
image方法可以引入图片文件，和HTML里的img标签作用相似。
paper.image(src, x, y, width, height);
文字
RaphaelJs有两个方法用来绘制文字
1、paper.text(50, 50, "Raphaël\nkicks\nbutt!");
text方法用来绘制一般文字，和HTML里的文字一样，它只能使用浏览器支持的字体。
在字符串参数中加入\n可以输入多行文字
2、paper.print(10, 50, "print", paper.getFont("Museo"), 30);
print方法可以渲染任意字体的文字，它的第四个参数是字体，这里需要使用paper.getFont()方法，该方法接受一个字符串参数，表示需要获取的字体名称。只要该字体已在系统中注册，就可以获取，并使用它渲染文字。
图形对象
绘制形状的方法会返回形状对象，该对象可以使用show()、hide()等方法。
attr()是形状对象的一个常用方法，它可以改变形状对象的属性，例如：
//绘制一个矩形，左上角位于(10,10)，宽800，高600，黑色填充
//这里可以使用链式操作
paper.rect(10, 10, 800, 600).attr('fill', '#000');
//或者用一个变量缓存形状对象，便于后续操作
var rect1 = paper.rect(10, 10, 800, 600);
rect1.attr('fill', '#000');
setTimeout(function(){
rect1.attr('fill', 'red');
},1000);路径是矢量绘图里最强大的工具，同时也比较复杂。
路径的参数是一组字符串，由“命令字母+坐标数字”的组合构成。
具体设置方法可以参看另外几篇介绍：
路径详解1（基本）：http://xbingoz.com/171.html
路径详解2（曲线）：http://xbingoz.com/194.html
MDN路径教程：http://xbingoz.com/320.html
RaphaelJs的相关资源：
Raphael官网：http://raphaeljs.com
Raphael官方API文档：http://raphaeljs.com/reference.html
Raphael官方API文档（中文版）：http://julying.com/lab/raphael-js/docs/
扫一扫
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
