官方介绍:
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/