Kineticjs vs Raphaeljs

Posted 2023-03-05

【中文标题】Kineticjs vs Raphaeljs

【英文标题】：

【发布时间】：2012-02-19 09:00:35

【问题描述】：

我正在使用 html5 开始一个新项目。两个最流行的图形工具包是KineticJS 和RaphaelJS。如果你有使用这些的经验，你有什么建议吗？它们提供哪些功能，使用其中一种功能是否有优势？

例如只有 RaphaelJS 适用于旧版浏览器（但这不是我需要的功能）。

【问题讨论】：

你必须更具体地了解你在做什么样的项目，不同的技术适合不同的需求。

@bennedich 我只需要知道他们俩的可能性有什么不同

请注意，RaphaelJS 的作者还创建了 SnapSVG：snapsvg.io，它更适合现代浏览器。

【参考方案1】：

RaphaelJS 和 KineticJS 最大的区别在于 RaphaelJS 使用 SVG 而 KineticJS 使用 HTML5 Canvas 进行可视化。 所以这真的取决于你在做什么类型的项目。

以下是一些关于 SVG 与 Canvas 的有用链接，您应该查看它们：

Thoughts on when to use Canvas and SVG（也描述了一种混合方法） Simon Sarris 在这个 *** 线程中表现出色 reply（我还在同一线程中在 SVG 和 canvas 之间发布了一些 benchmarks）

总结一下：

如果您想创建一些交互式图表，我会使用 RaphaelJS，因为使用 SVG 更容易做到这一点（KineticJS 确实提供了一些抽象 API，这也应该很容易做到）。 如果您想可视化大量形状/对象，我建议使用 KineticJS 作为画布缩放，通常可以更好地绘制大量形状/对象，并且 KineticJS 使用多个图层来提高渲染性能。

【讨论】：

我不同意 SVG 在图表上比画布效果更好，实际上。看看这个演示：meteorcharts.com Canvas 可以处理数十万个数据点，并且即使在移动设备上也能保持响应。 SVG 根本无法做到这一点。

当然，如果您必须处理要绘制的大量形状/点，那么 Canvas 的缩放比 SVG 更好（请参阅线程中的基准）。但是对于简单的交互式图表（条形图、饼图等），SVG 已经足够快了，如果您使用D3.js，您可以轻松创建一些非常令人印象深刻的交互式图表。

SVG 还是画布？在两者之间选择。 dev.opera.com/articles/view/…

这也是一个关于“Web 上的图形”的有趣演示，涵盖了多个框架（包括 KineticJS 和 RaphaelJS）。实际上演示是由 KineticJS 的创建者完成的。 youtube.com/watch?v=ZS6QqNJ0VRA

@Ümit - 推荐用于交互式可视化的内容，例如如果我想在几百个数据点的图表上拖动点？并附上这些点的事件，你会建议哪个图书馆？