Создать простой инструмент для рисования в HTML5?

Question

Я работаю над этим проектом, в котором я хотел бы дать своему пользователю возможность нарисовать простой план этажа по комнатам, а затем снабдить его, возможно, некоторыми метаданными (например, названиями комнат).

Я вижу это так: - вы нажимаете "добавить новую комнату" - вы рисуете прямоугольник на экране (или, возможно, другую простую форму) - вы даете ему имя

Я хотел бы узнать, какой лучший (и самый простой) язык использовать для создания такого рода инструмента. HTML5+ JQuery? Вспышка? Есть ли какой-либо существующий инструмент / плагин, который мог бы добиться цели?

Спасибо за вашу помощь!

Answer 1

Самый простой способ сделать это, вероятно, будет в HTML5 с тегом canvas. Вы можете использовать jquery для получения событий мыши.

Если у вас есть доступ и опыт работы с Flash, это, вероятно, будет вашим лучшим выбором, так как пользователи чаще имеют Flash, чем html5.

Если вы используете HTML5, вот несколько полезных справочных документов

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

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

Answer 2

Я бы использовал jQuery и элемент холста html5, но я бы попросил пользователя нарисовать фигуры, используя прямые линии. Они нажимают на изображение линии, выбирают две точки и jQuery рисует линию. Рисование фигур в jQuery позволит вам сохранить их, что позволит вам легко добавлять метаданные и упорядочивать данные, сериализованные в БД, для будущего использования или сохранять в виде изображения, как вы пожелаете.