Создать простой инструмент для рисования в 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 позволит вам сохранить их, что позволит вам легко добавлять метаданные и упаковать данные, сериализованные в БД, для будущего использования или сохранить как изображение, как вам угодно.