用户在图像上绘制形状

Question

我希望允许用户在图像上绘制带有用户定义文本的半透明基本形状（矩形，圆形）。基本的想法是在下面有一个地图，用户可以标记它的某些区域。自从进行Web开发以来已经有一段时间了，而且我很不确定哪种方法最好。它甚至可以在旧版浏览器上运行。

任何帮助将不胜感激！

Answer 1

首先，忘记旧的浏览器，毕竟是2012年。如果没有“border-radius”这样的css属性，您将无法绘制圆圈。

其次，无论如何，你都必须使用javascript来进行“绘图”。 jQuery + jQuery UI对此非常有用。看起来你至少需要关注插件：

• Draggable - 拖动你的形状
• Resizable - 调整形状
• Dialog - 将文本放入形状中（对话框中必须有一个文本区域。填写textarea并单击“确定”后，文本将被放入形状中。）

还有另一种方法可以将文本放入形状中，但这需要一些认真的开发工作。

现在，如何创建形状。有几种方法：

1. 您必须单击的按钮，它将创建一个带有设置参数的框
2. 使用boxer插件

这就是它的要点。

渲染已保存的形状是完全不同的事情，我相信它应该没有问题。只需从数据库中获取数据并根据其属性渲染形状。