Пользователь рисует фигуры поверх изображения

Question

Я бы хотел позволить пользователю рисовать полупрозрачные основные фигуры (прямоугольник, круг) с определенным пользователем текстом поверх изображения. Основная идея состоит в том, чтобы иметь карту внизу, и пользователи могли отмечать определенные области на ней. Прошло много времени с тех пор, как я занимался веб-разработкой, и я совершенно не уверен, какой подход будет лучшим. Должно работать даже в старых браузерах.

Любая помощь будет оценена!

Answer 1

Во-первых, забудьте о старых браузерах, ведь это 2012 год.Вы не сможете нарисовать круг, не имея таких свойств css, как "border-radius".

Во-вторых, несмотря ни на что, вам придется использовать javascript, чтобы сделать "рисование".jQuery + jQuery UI отлично подойдет для этого.Похоже, вам понадобятся как минимум следующие плагины:

• Draggable - для перетаскивания фигур вокруг
• Resizable - для изменения размераshape
• Диалог - для ввода текста в фигуру (в диалоге должна быть текстовая область. После заполнения текстовой области и нажатия кнопки ОК текст будет введен в форму).

Существует еще один способ преобразования текста в фигуры, но для этого потребуются серьезные усилия по разработке.

Теперь о том, как создавать фигуры.Есть несколько способов:

1. Кнопка, которую вы должны нажать и которая создаст окно с заданными параметрами
2. Использование boxer Плагин

В этом суть.

Визуализация сохраненных фигур - это совсем другое, и я считаю, что это не должно быть проблематично.Просто извлекайте данные из БД и на основании их свойств визуализируйте фигуры.