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

Question

3

我正在处理一个项目，希望给用户提供绘制简单楼层平面图并添加元数据（例如房间名称）的功能。

我设想是这样的： - 点击“添加新房间” - 在屏幕上绘制矩形（或其他简单形状） - 给它命名

我想知道创建这种工具的最佳（和最简单）语言是什么。 HTML5+jQuery？Flash？是否有任何现有的工具/插件可以胜任？

谢谢您的帮助！

- MonsieurScotch

我可能会说Flash是你想要的。仅使用JavaScript（如菱形或圆形）不容易绘制“简单”的形状，而这在Flash中很容易实现。您可以使用SVG（可缩放矢量图形）。HTML5提供了<canvas>，允许您绘制形状，但您需要有绘制菱形、菱形等的自定义代码。 - vinceh

1

@vinceh：SVG被IE9支持，而Raphael SVG/JavaScript库则为旧版本的IE提供了VML。 - Jonas

2个回答

0

我会使用jQuery和html5画布元素，但我会让用户使用直线来绘制形状。他们点击线条图像，选择两个点，然后jQuery绘制线条。在jQuery中绘制形状将允许您存储它们，以便轻松添加元数据，并将数据序列化为数据库以供将来使用，或者存储为图像，任何您希望的方式。

- Liam Bailey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joel · Accepted Answer

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

如果您有Flash的访问权限和经验，那可能是您的最佳选择，因为用户更有可能拥有Flash而不是html5。

如果您确实使用html5，则这里有一些很好的帮助文档。