raphael.js vs paper.js

时间:2011-10-15 19:30:49

标签: javascript css3 svg

raphael.js和paper.js之间的主要区别是什么?

我应该看看还有其他的库吗?任何像这样的人更关注CSS3然后SVG?

谢谢!

4 个答案:

答案 0 :(得分:52)

Raphael使用SVG。纸张使用画布。

这是主要的区别。

就你可以用它们做什么而言,Canvas和SVG各有各的各样的地方,并且对不同的东西都有好处(尽管如果你要求它们也能够做对方的事情)。从纯粹的功能角度来看,在决定使用哪一个之前,你需要考虑你想要对库做什么。

浏览器兼容性将成为一个大问题,无论您使用哪一个。事实上,这可能是一个比功能更大的问题。

拉斐尔在桌面上有一个优势,因为它可以检测旧版本的IE(早在IE6),并且回归到使用VML而不是SVG。这意味着它在virtualyl所有桌面浏览器上具有出色的兼容性。旧版IE和Paper.js people don't really seem too worried about it

不支持画布

但在手机上,Paper.js可能会更好,因为Canvas在移动设备上的支持要比SVG好得多。大多数Android设备根本不支持SVG。这种情况正在发生变化:Android 3.0引入了SVG支持,但是现在销售的大多数Android设备都带有v2.x,所以在你可以依赖移动设备上的SVG之前还需要一段时间。

有关浏览器支持的详细信息,请参阅CanIUse站点:

希望有所帮助。

答案 1 :(得分:8)

最明显的区别是Raphael瞄准SVG,而Paper瞄准Canvas元素。看来Paper还有更多先进的功能,而Raphael只是核心的SVG元素,然后可以通过插件进行扩展。可以说,它更多地取决于您的需求,以及您希望定位的环境。 Canvas在某些移动浏览器上运行良好,SVG根本不适用于移动环境。

另一方面注意:正如我所知,SVG在IE(9)或Firefox中没有硬件加速,而且,如果我的内存没有让我失望,Canvas至少在IE中(9)。至于IE 8及更低版本,你需要一个浏览器插件,大多数都有,但它是一种期望的依赖。

答案 2 :(得分:6)

  

我应该看看还有其他的库吗?

是的,你应该看看processing.js

顺便说一句 - 这是raphael.js,paper.js和processing.js之间的绝佳比较: http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/

甚至代码比较效果相同: http://zgrossbart.github.com/3gears/

答案 3 :(得分:2)

  

我应该看看还有其他的库吗?

如果您有Flash开发经验,可以考虑easel.js,它为您提供了一些闪存显示机制。画架看起来对我来说是一个非常好的书。

另一个有趣的库是processingjs,与其他libs不同,processingjs也可以处理3d内容。 (它在2d也很好。)与纸张不同,raphael和画架处理不能处理开箱即用的用户交互。

两个库都使用canvas。