简单任务（SVG 与 Canvas）[关闭]答案

【问题标题】：Simple task (SVG vs. Canvas) [closed]简单任务（SVG 与 Canvas）[关闭]
【发布时间】：2012-09-09 23:53:47
【问题描述】：

我只想制作 200 个通过线连接的可点击节点（捕获鼠标事件）。每个节点都有一些以实时数据流的形式与之关联的数据（为简单起见，假设为 CSV），单击节点会显示在图表中绘制的值。

所有这些节点和线所在的区域都应该是可缩放的。

即使在谷歌上搜索了很多之后，我还是对像这个 SVG 或 Canvas 这样简单的东西感到困惑。此外，什么图书馆最适合这个目的。对于 Canvas，我们有 KineticJS（使用 HTML5），对于 SVG，我们有 d3 等等。

专家，请建议。提前非常感谢。

【问题讨论】：

标签： javascript canvas svg d3.js kineticjs

【解决方案1】：

SVG 在这方面要好得多。 Canvas 没有鼠标事件，您需要使用拾取技术。

【讨论】：

感谢您的回复。但是使用 KinectJs 时，我可以轻松关联鼠标事件，这增加了混乱。
他们是一个有多少效果和强烈绘画的问题。 SVG 是“dom”，它很容易玩，但对于任何强烈的东西，它远不及画布的性能。但是 SVG 的性能非常好。我会选择 SVG，用于视网膜屏幕。

【解决方案2】：

这取决于。如果您有与每个节点相关联的复杂视觉效果，如果您将节点光栅化一次，然后克隆并在画布上绘制而不是使用 SVG，它会工作得更快。例如，它可以使用Paper.js 来完成（并且它对鼠标事件有一些支持）。如果你的节点很简单，比如简单的矩形或其他东西，你可以使用 SVG。有些浏览器使用 SVG 比其他浏览器更高效。例如，IE9 有非常高效的 SVG 支持，所以如果你针对特定的浏览器，首先检查它的 SVG 绘制速度。
顺便说一句，如果你想旋转、缩放、移动对象和对象组等，Paper.js 特别有用。它对此有很好的支持。

【讨论】：

No No .. 我的节点只是简单的正方形。单击这些方块后，屏幕左上角开始出现相应的图。这就对了。所以，本质上我只是为了关联鼠标事件。（使用这些节点左-右键单击 ..mouseover）+ 想要在空白区域滚动时放大/缩小整个内容。
好的，那么有 2 个选项 - SVG 使用您提到的 d3 或 Raphaël 之类的库，或者您可以使用 Paper.js 实现几乎与 Canvas 实现的相同功能。处理 SVG 的鼠标事件更容易，但您也可以在 Paper.js 中执行此操作。在简单节点的情况下，这两个选项都是相似的。
非常感谢弗拉迪奇。我还计划稍后在节点周围制作一些轮廓。这个功能会比其他功能更喜欢 SVG/Canvas 吗？你有没有使用过 KineticJS .. 对此有什么看法吗？ .. 这可以使用 Dojo 完成吗？ .. 很抱歉一次问了太多问题
我从未使用过 KineticJS。它看起来与 Paper.js 非常相似，Paper.js 只是 Canvas 的另一个矢量库，因此它可能对您的任务有用。在 200 个节点的情况下，它应该比 SVG 绘图更快。如果你以后想让你的节点更复杂或者创建更多的节点，Canvas 和 SVG 在性能上的差异会更加明显。