Kineticjs与Raphaeljs对比

Question

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

例如，只有RaphaelJS可以在旧版浏览器上工作（但这不是我需要的功能）。

- Artur Keyan

---

你必须更具体地说明你正在进行的是什么类型的项目，不同的技术适用于不同的需求。 - bennedich

@bennedich 我只需要知道它们两者的可能性差异是什么。 - Artur Keyan

请注意，RaphaelJS的作者还创建了SnapSVG：http://snapsvg.io/，它更适合现代浏览器。 - Erel Segal-Halevi

Answer 1

RaphaelJS和KineticJS的最大区别在于RaphaelJS使用SVG，而KineticJS使用HTML5 Canvas进行可视化。
因此它实际上取决于您正在进行的项目类型。

这里有一些关于SVG vs Canvas的有用链接：

• 思考何时使用Canvas和SVG（还描述了混合方法）
• Simon Sarris在此stackoverflow线程中的优秀回复（我还在同一线程中发布了一些基准测试，比较了SVG和canvas）

总之：

• 如果要创建一些交互式图表，则建议使用RaphaelJS，因为使用SVG更容易（KineticJS也提供了某些抽象API，使其也很容易实现）。
• 如果要可视化大量形状/对象，则建议使用KineticJS，因为canvas通常可以更好地扩展大量需要绘制的形状/对象，并且KineticJS使用多个图层来提高渲染性能。

- Ümit

---

实际上，我不同意SVG在图表方面的表现比Canvas更好。看看这个演示：http://meteorcharts.com/。Canvas可以处理数十万个数据点，并保持响应，即使在移动设备上也是如此。而SVG就做不到那样。 - Eric Rowell

当然，如果你需要处理大量的形状/点来绘制，那么Canvas比SVG更具扩展性（请参见线程中的基准测试）。 但是对于简单的交互式图表（条形图、饼图等），SVG已经足够快了，如果你使用D3.js，你可以用相对较少的工作量创建一些真正令人印象深刻的交互式图表。 - Ümit

SVG还是Canvas？在两者之间进行选择。http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ - Cherven

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

@Ümit - 如果我想在几百个数据点的图表上拖动点并附加事件，您会建议使用哪个库进行交互式可视化呢？ - Mutant