说起Raphael,可是老早就听说了,不过前些年和EXTJS合并后好像不怎么更新了,好在组件没什么bug,更新或不更新都阻拦不了我们兼容IE9以下浏览器的脚步。废话完毕,下面先简单介绍下我们的主角——Raphael

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。正因Raphael对VML的强力支持,使得在IE9以下版本,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+,实际测试中,甚至IE5都能够实现我们想要的图形、动画效果。

下面展示下Raphael的简介操作,假设页面有一div容器,id为chart,我们可以这样写:

var paper=new Raphael(document.getElementById(“chart”),1000,500);

这样就创建了画布;

var rect=paper.rect(150,150,150,150);

可以这样创建矩形;

var circle=paper.circle(150,150,150);

可以这样创建圆;

var path=paper.path(“M0,0L150,150L300,300Z”);

也可以这样绘制任意图形,每一次创建图形后,就会自动插入到页面内部。上面简单列Raphael还有很多特性,如Set、Animation等,这里不再一一介绍,有兴趣的童鞋可以自己去官网看下,虽然文档不是很全,但对于专业的你,应该已经足够了。

官网地址是:http://raphaeljs.com/

大概讲了下Raphael的方便,不免再啰嗦下其不爽之处,最近又遇奇葩需求,鉴于多年经验没见过类似图表,无奈之下,自己拿Raphael绘制,兼容性良好,一切基本元素就绪,可当我想加动画效果时发现,我所绘制的多个元件组成的图,不能很好的实现动画效果,主要是因为Raphael不支持Group元素(g标签),这使得我不得不想办法大规模的改动组件,尽量将小元件绘制到一个path中,以此来保证动画的流程度。另外一点就是,在使用text标签时发现,Raphael在每个创建好的text标签下面加一tspan来控制文本,如果使用\n,Raphael则会计算好高度,默认在text内部增加多个tspan,但这对于我们奇葩需求又不好用了,我想保证我文本元件在一起的同时,还想控制内部多个tspan样式差异,比如三个tspan字体大小、颜色不同,这点Raphael没有很好的API控制。对于没有group的问题,不知道其原因,期间也在网上找过增加group的插件,因为要兼容ie8,效果都不理想,最终放弃,对于text样式的控制,只好插入页面后人为通过js操作其属性来达到要求了。

就简单介绍到这了,小小透露下,目前小子正在着手实现Raphael的分组功能,因为Raphael扩展接口的方式支持有限,目前思路是修改Raphael源代码增加特殊Element,以实现group效果,目前测试svg下良好,可以使用所有Element属性,包括animate,但是IE8下使用VML的情况,暂未测试完毕,大家可以期待哦,如果完成,后续会放出修改后的代码给大家使用哦。