html5中的可选形状和可移动形状

Question

我正在使用php，javascript和Canvas或SVG创建一个动态的交互式网络图

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

我对SVG一无所知。

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

Answer 1

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

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

Answer 2

有一些用于构建图表和图形的项目。您可以尝试基于svg的Raphaël，因此它也应该是兼容的。

Answer 3

我认为“隐藏的画布”是指我的教程。它仍然适用于多个对象和多个图层，您只需要以正确的z顺序绘制它们。

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

如果您不想处理它，SVG会内置所有对象选择。正如Zlatev建议的那样，试试拉斐尔。如果性能太差（太多对象），则必须切换到画布，因此它实际上取决于图中节点/链接的数量。

您必须自己负责将数据发送到您的服务器（以您喜欢的任何方式）。 SVG / Canvas / Raphael没有任何内置功能可以为您完成。