在HTML5中创建一个简单的绘图工具?

时间:2011-07-20 17:25:17

标签: jquery html5 draw floor

我正在开展这个项目,我想让我的用户可以按房间绘制一个简单的平面图,然后用一些元数据(比如房间名称)来存储它。

我是这样看的: - 你点击“添加一个新房间” - 你在屏幕上绘制一个矩形(或者可能是另一个简单的形状) - 你给它起个名字

我想了解用于创建此类工具的最佳(也是最简单)语言。 HTML5 + jQuery的?闪?是否有任何现有的工具/插件可以解决这个问题?

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

最简单的方法可能是使用canvas标签的HTML5。您可以使用jquery来获取鼠标事件。

如果你有Flash的访问权限和经验,那么这可能是你最好的选择,因为用户比html5更有可能拥有flash。

如果您使用html5,那么可以使用一些很棒的帮助文档

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

http://api.jquery.com/category/events/mouse-events/

答案 1 :(得分:0)

我会使用jQuery和html5 canvas元素,但我会让用户使用直线绘制形状。他们点击线图像,选择两个点,jQuery绘制线。使用jQuery绘制的形状将允许您存储它们,以允许您轻松添加元数据,并将序列化的数据打包在数据库中以供将来使用,或者存储为图像,无论您希望如何。