允许用户编辑/添加/移动图像中的项目答案

【问题标题】：Allowing user to edit / add / move items in an image允许用户编辑/添加/移动图像中的项目
【发布时间】：2009-06-03 01:35:48
【问题描述】：

这就是我想要做的事情：
我有一个图像，比方说一个房间。这将是一张静态图片。

我希望用户能够执行以下操作：
1. 添加一组图片，比如椅子、桌子等。
2.移动已经在图像上的项目。
3. 编辑附加到图像的文本。

我还需要将此图像存储在服务器上，以便其他用户可以看到更新。

有什么想法吗？ TIA。

编辑
我想基本上有一个谷歌地图类型的界面，用户可以添加/编辑/移动给定集合中的项目，而不是只读的。因此，例如，我想让他们拿起一张“椅子”图像并将其滑到房间的图像上，无论椅子实际在哪里。我已经看到在 JQuery 中完成的点点滴滴，但还没有找到一个很好的例子。希望这是有道理的。

编辑2
找到了一些我正在寻找的东西。如果其他人需要这样做，我正在查看OpenLayers，它在 JS 框架中模仿 GoogleMaps。

【问题讨论】：

【解决方案1】：

您可以通过使用 IE 上的透明 png hack 和服务器上对 24 位 pngs by most modern browsers. Store positions in database. Store pngs 的原生支持来做到这一点。

【讨论】：

我对此做了一些研究，看起来这就是我想要的。我只需要支持> = IE7，所以我应该没问题。这相当普遍吗？找不到任何好的代码示例。
我从未遇到过手头的任务，但我认为它非常简单，具有 sql、css 和 javascript 的基本知识。如果您只需要支持 IE7+，我认为它对 png 中的 alpha 透明度具有原生支持。

【解决方案2】：

你可以使用canvas元素来实现这个，但是浏览器支持不一致。

正如 Kane 在 cmets 中指出的那样，您最好在 Flash 之类的东西中执行此操作（而不是 Silverlight，因为并非所有主要浏览器都支持它）

【讨论】：