选择和移动形状在HTML5

我使用PHP创建一个动态的，互动的网络图，JavaScript和任何帆布或SVG选择和移动形状在HTML5

然而，用帆布，我不知道如何使每个对象选择。我不想使用隐藏的画布，并检测鼠标是否在一个对象上，因为我将有很多相交的对象，并且有很多图层的画布会混乱。

我对SVG一无所知。

SVG会更好地服务于这个目的吗？或者什么是对此的画布解决方案。

对于一个画布抽象，看看[fabric.js]（http://kangax.github.com/fabric.js/test/demo） – kangax 2011-06-15 14:05:04

SVG的一个优点是它具有代表图形中的形状的具体DOM对象，所以你会自动获得大量的鼠标事件处理和事件冒泡。

或者，您可以使用EaselJS，它提供了一个非常强大的显示列表，让您无需管理隐藏的画布。

EaselJS

2011-06-13 23:36:51

似乎EaselJS正在尝试实现很多SVG已经在做的事情。为什么我应该使用一个新的插件，而已经有这么多的SVG支持了？我只是想弄清楚双方的观点 – 2011-06-13 23:47:33

你对使用画布的最终作品有更加丰富的控制。处理图形丰富的位图时无需额外开销。使用SVG，要实现相同的外观，您可能需要分层绘制多种形状并使用复杂的渐变。基于画布的解决方案也可以更具响应性，因为没有事件冒泡通过所有SVG的具体元素。 – 2011-06-14 18:10:56

已经有一些建筑图和图形的项目。你可以试试Raphaël这是基于svg的，所以它应该也是兼容的。

2011-06-13 23:24:52 Zlatev

我听说过拉斐尔...但我也听说那里没有'通过Raphael接受输入（如w/html表单），然后反馈到php然后我的数据库...我需要用户能够修改网络图和数据回到php ...是这可能与Raphael – 2011-06-13 23:49:19

我想通过“隐藏的画布”你的意思是我的教程。它仍然可以处理多个对象和多个图层，您只需要以正确的z顺序对它们进行绘制。

当然有更快（但更复杂）的方式。

如果你不想处理它，SVG内置了所有的对象选择。给拉斐尔一个尝试，Zlatev建议。如果性能太差（太多的对象），你将不得不切换到画布，所以它实际上取决于你图中节点/链接的数量。

虽然你必须自己照顾发送数据到你的服务器（不管你喜欢什么方式）。 SVG/Canvas/Raphael内置的任何东西都不会为你做到。

2011-06-14 15:08:04

由于节点和链接太多，SVG会在什么时候变慢。比方说，我可能会有数百个节点......会吗？ – 2011-06-14 17:23:17

回答