简单的任务（SVG与画布）

我只想制作200个可点击的节点（捕获鼠标事件），它们通过线连接。每个节点都有一些与它们相关的实时数据流形式的数据（为了简单起见，假定为CSV），并且点击节点显示图中绘制的值。简单的任务（SVG与画布）

所有这些节点和线条所在的区域应该可以放大。

即使使用Google搜索了很多之后，我对这个SVG更适合或Canvas这样简单的东西感到困惑。此外，什么库将是最好的目的。像Canvas一样，我们使用KineticJS（使用HTML5），对于SVG我们使用d3和所有的。

专家，请提出建议。提前致谢。

来源

2012-09-17 Andy897

SVG对此更好。画布没有鼠标事件，你可以使用拾取技术。

来源

2012-09-17 18:04:23 3on

感谢您的回复。但是使用KinectJs，我很容易将鼠标事件关联起来，这增加了混淆。 – Andy897

他们是一个多少效果和激烈绘画的问题。 SVG是“dom”，它很容易玩，但对于任何激烈的事情来说，它都远不及画布的表现。但SVG非常高效。我想要SVG，视网膜屏幕。 – 3on

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

来源

2012-09-17 18:33:11 vladich

不，不，我的节点只是简单的方块。在点击这些方块时，相应的绘图开始出现在屏幕的左上角。这就对了。所以，基本上我只是为了关联鼠标事件。（用这些节点左右点击鼠标）+想要在空白区域滚动放大/缩小整个事物。 – Andy897

好吧，有2个选项 - SVG使用类似d3的库或Raphaël，或者可以使用Paper.js来实现与Canvas实现的功能几乎相同的功能。为SVG处理鼠标事件更容易，但您也可以在Paper.js中执行此操作。在简单节点的情况下，两个选项都是相似的。 – vladich

非常感谢弗拉迪奇。我也打算在节点后面做一些轮廓..这个功能是否会优先支持SVG/Canvas？你有没有使用过KineticJS ..对此有何看法？ ..这可以使用Dojo完成吗？ ..很抱歉，在一个 – Andy897

简单的任务（SVG与画布）

回答

相关问题