html5 中可选择和可移动的形状答案

【问题标题】：selectable and movable shapes in html5html5 中可选择和可移动的形状
【发布时间】：2011-06-13 21:55:21
【问题描述】：

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

但是，对于画布，我不知道如何使每个对象都可选择。我不想使用隐藏的画布来检测鼠标是否在对象上，因为我将有很多相交的对象并且有很多层的画布会很乱。

我对 SVG 一无所知。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

似乎 EaselJS 正在尝试实现 SVG 已经在做的很多事情......为什么我应该使用新的插件，而 SVG 已经有了如此多的支持？我只是想弄清楚双方的论点
您可以使用画布对最终构图进行更丰富的控制。无需额外开销即可处理图形丰富的位图。使用 SVG，要获得相同的外观，您可能必须将许多形状分层并使用复杂的渐变。基于画布的解决方案也可以更快地响应，因为没有事件冒泡贯穿所有 SVG 的具体元素。

【解决方案2】：

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

【讨论】：

我听说过 Raphael...但我也听说没有办法通过 Raphael 接受输入（如带有 html 表单），然后反馈到 php 然后我的 DB...我需要用户能够修改网络图并将数据返回到 php...Raphael 有可能吗

【解决方案3】：

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

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

如果您不想处理它，SVG 具有内置的所有对象选择。按照 Zlatev 的建议尝试 Raphael。如果性能太差（对象太多），您将不得不切换到画布，因此这实际上取决于您图表中节点/链接的数量。

不过，您必须自己负责将数据发送到您的服务器（以您喜欢的任何方式）。 SVG/Canvas/Raphael 中没有任何内置功能可以为您做到这一点。

【讨论】：