raphael.js 与 paper.js

Posted 2023-02-22

【中文标题】raphael.js 与 paper.js

【英文标题】：raphael.js vs paper.js

【发布时间】：2011-12-08 11:16:50

【问题描述】：

raphael.js 和 paper.js 的主要区别是什么？

还有其他我应该看的库吗？任何像这样更关注 CSS3 而不是 SVG 的？

谢谢！

【参考方案1】：

拉斐尔使用 SVG。纸张使用帆布。

这是主要的区别。

就你可以用它们做什么而言，Canvas 和 SVG 各有其自己的位置，并且适用于不同的事情（尽管如果你要求它们也可以做彼此的事情）。从纯粹的功能角度来看，在决定使用哪个库之前，您需要考虑要使用该库做什么。

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

Raphael 在桌面上具有优势，因为它可以检测旧版本的 IE（早至 IE6）并回退到使用 VML 而不是 SVG。这意味着它在虚拟所有桌面浏览器上具有出色的兼容性。旧版 IE 和 Paper.js people don't really seem too worried about it 根本不支持 Canvas。

但在手机上，Paper.js 可能更好，因为 Canvas 在手机上的支持比 SVG 好得多。大多数 android 设备根本不支持 SVG。这种情况正在发生变化：Android 3.0 引入了 SVG 支持，但即使是现在销售的大多数 Android 设备都附带 v2.x，因此您还需要一段时间才能依赖 SVG 在移动设备上工作。

有关浏览器支持的更多信息，请参阅 CanIUse 网站：

CanIUse SVG CanIUse Canvas

希望对您有所帮助。

【讨论】：

谢谢，是的，这很有帮助。我可能会使用选择 paper.js

【参考方案2】：

最明显的区别是 Raphael 以 SVG 为目标，而 Paper 以 Canvas 元素为目标。似乎 Paper 具有更高级的功能，而 Raphael 只是核心 SVG 元素，然后可以使用插件对其进行扩展。可以说，这更多地取决于您的需求以及您希望定位的环境。 Canvas 在某些移动浏览器上运行良好，而 SVG 几乎不能在移动环境中运行。

另外说明：SVG，据我所知，在 IE (9) 或 Firefox 中不是硬件加速的，而且，如果我的记忆没有让我失望，Canvas 至少在 IE 中是(9)。至于 IE 8 及以下，你需要一个浏览器插件，大多数都有，但它是一个依赖项。

【讨论】：

对于 IE8 及更早版本，Raphael 获胜 - 它与 IE6 兼容，因为它回退到在旧版 IE 中使用 VML 而不是 SVG。

如果 canvas 是硬件加速的，那么 svg 通常也是如此，因为它们运行在同一个底层图形库上。

我对 IE8 或更早版本没有任何同情心，所以我将使用纸张。如果您不需要支持这些浏览器，那就更好了。

【参考方案3】：

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

是的，你应该看看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/

【讨论】：

看到代码比较+砸杂志的文章很棒——感谢分享。

【参考方案4】：

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

如果您有 Flash 开发经验，您可以考虑easel.js，它为您提供了一些 Flash 显示机制。 Easel 对我来说是一个非常好的库。

另一个有趣的库是 processingjs，不像其他库 processingjs 也做 3d 的东西。 （它也擅长 2d。）与纸张不同，raphael 和画架处理不处理开箱即用的用户交互。

两个库都使用画布。

【讨论】：

+1：我之前没见过easel.js，但听起来很不错。我已将 URL 添加到您的答案中，以帮助其他人找到它。

KineticJS 是一个专注于性能的组合库，具有节点嵌套风格的架构。如果你想要一个类似于 Flash 的 API，我建议使用画架。如果你想要一个类似于 jQuery 或 YUI 的 API，试试 KineticJS。