raphael js库简介

raphael js库是在webrebuild交流会上听专家将到的，后来就看了下，果然很强大——通过svg/vml+js实现跨浏览器的矢量图形实现方案。

这其实和cufon等网络字体的实现原理是有些类似的：非ie浏览器使用svg绘图，然后ie中使用vml。它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案，包括一些动画效果。

raphael的语法也很简单，基本上了解svg就会很容易上手的：

var c = paper.path("m10 10l90 90");
// 画一条线；

浏览器支持

ie6+、firefox 3.0+、chrome、opera等都是很好支持的。

一些酷酷的例子：

使用raphael绘制的117个矢量图标：

嗯，这些图标都是用raphael实现的，点击例子页面中的图标下面就会显示代码。

简单的动画效果，虽然也可以用js+css3实现，但是这个可是跨浏览器的哦。。。

感兴趣的同学可访问官方网站查看更多demo，以及参考文档。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯isux团队 follow me on twitter @qianduan。

20 个评论

• 

  wyvern 发表于sep 1, 2010 at 22:27

  我内个去，这货不是这个星球上的东西

  回复
  • 

    神飞 发表于sep 1, 2010 at 23:23

    好吧，我来自火星 :p

    回复
• 

  fouber 发表于sep 1, 2010 at 23:25

  呵呵，那excanvas以及uupaa的uucanvas不是更好？抹平了vml和canvas的接口，也是跨浏览器的矢量绘图方案，而且各大公司也都慢慢放弃对svg的支持了吧？

  回复
  • 

    神飞 发表于sep 1, 2010 at 23:31

    其实各个浏览器一直都不是很重视svg，以至于它的能量远远没有被发挥出来，ie9想在svg上发力，但不知道能不能拯救它。用canvas+vml实现跨浏览器的矢量绘图或许也很有优势吧，虽然vml和svg更像一些。

    回复
    • 

      fouber 发表于sep 1, 2010 at 23:40

      以现在的形势来看，能整合canvas+vml就差不多覆盖全部了。小日本的uupaa库在这方面做的很好，uupaa的svn：
      http://uupaa-js-spinoff.googlecode.com/svn/trunk
      虽然没有像raphael那样做了高级绘图及动画的封装，但他抹平了canvas和vml的差异，基于这个前提再做封装效果或许会更好一些。而且面向未来。

      回复
• 

  江海客 发表于sep 5, 2010 at 17:14

  好东西啊，研究一下。

  回复
• 

  woiweb 发表于sep 7, 2010 at 20:18

  是不是可以创建点线面啥的？

  回复
• 

  isee 发表于nov 22, 2010 at 20:30

  太刺激了~~

  回复
• 

  joe 发表于dec 12, 2010 at 20:30

  我觉的这还真的不是现在在中国能用的咧。

  回复
• 

  destiny 发表于jan 25, 2011 at 18:01

  为什么我们不能用啊。。
  这个可以用来干什么呢 在网页上画图？？

  回复
• 

  wenbin 发表于feb 8, 2011 at 23:53

  这个库挺好用的

  回复
• 

  adam.lu 发表于feb 15, 2011 at 17:41

  刚好今天写了一个raphael 的demo
  http://adamlu.net/demo/dgc_wheel/

  代码拙劣，莫见笑 : )

  回复
  • 

    jozhi 发表于jan 25, 2013 at 17:09

    哥们儿， 你demo挂了

    回复
• 

  andy 发表于mar 3, 2011 at 16:15

  很牛x 我看到这个技术和extjs有伙伴关系 估计extjs里的图表之类 能用这个实现

  回复
• 

  ben 发表于mar 3, 2011 at 21:21

  果然很强!!
  服了.

  回复
• 

  time 发表于mar 30, 2011 at 00:34

  这做的效果真炫，可以做到和flash一样的效果

  回复
• 

  on the road 发表于dec 7, 2011 at 11:28

  这个库不错，主要是可以得到canvas里元素的事件。。。。。。

  回复
• 

  weolar 发表于apr 30, 2012 at 16:55

  我就搞不懂了，为什么这么多人只喜欢canvas，而对svg的强大视而不见。个人觉得svg设计的比canvas强大一百倍，canvas这种简单js接口的绘图功能，svg不但都包括了，还提供了dom操作、动画、滤镜、遮罩、坐标变换等一系列强大功能。canvas只是乔布斯的苹果那帮人吹捧出来的东西。

  回复
  • 

    神飞 发表于may 1, 2012 at 01:26

    哈哈，淡定。svg确实很强大，但相对canvas它的浏览器支持更不好，兼容ie还要专门搞成vml格式。而前端开发人员基本都对ie有抵触情绪，所以虽然canvas的浏览器支持情况比svg好不了太多，但是可以完全无视ie678是件很爽的事情。另外，canvas完全用js实现。svg还要折腾xml，所以开发成本稍微高一点，各种原因吧，技术中也有＂时尚＂的。。。我个人也很看好svg的。

    回复
• 

  云端 发表于jun 6, 2013 at 16:49

  大哥，画线动态缩放的demo么，发个给我（915308414@qq.com），谢谢，

  回复