Question

I would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I’m quite uncertain which approach would be the best. It should work even on older browsers.

Any help would be appreciated!

Answer 1

First, forget about old browsers, it’s 2012 after all. You won’t be able to draw circle without having such css properties as “border-radius”.

Second, no matter what, you’ll have to use javascript in order to do the “drawing”. jQuery + jQuery UI would be great for that. It appears like you’d need at least following plugins:

• Draggable – to drag your shapes around
• Resizable – to resize shapes
• Dialog – to put text into the shape (there must be a textarea within the dialog. After you fill textarea and click Ok text will be put into the shape).

There’s another way to put text into shapes, but that’ll require some serious development efforts.

Now, how to create shapes. There are couple of ways:

1. Button which you’ll have to click and which will create a box with set parameters
2. Use boxer plugin

That’s the gist of it.

Rendering of the saved shapes is quite a different thing and i believe it shouldn’t be problematic. Just fetch data from DB and based on it’s properties render shapes.