I need to design a web app that allows visitors to draw and label basic shapes. The visitors will be drawing a basic map of a store. The shapes drawn will need to be stored in a database (their coordinates and sizes) along with their labels and a few options so they can be easily replicated later in a different app.
What's the easiest way to accomplish this on a web page?!
I need to design a web app that allows visitors to draw and label basic shapes. The visitors will be drawing a basic map of a store. The shapes drawn will need to be stored in a database (their coordinates and sizes) along with their labels and a few options so they can be easily replicated later in a different app.
What's the easiest way to accomplish this on a web page?!
Share Improve this question asked Mar 9, 2011 at 22:01 ShawnCBergShawnCBerg 5942 gold badges7 silver badges27 bronze badges4 Answers
Reset to default 9If I was doing this, I'd use Raphaël.
Check out the demos on the above link, it can do all sorts of crazy.
If you're after an actual code sample, I'll have a go using Raphaël if you like.
It works in many browsers:
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Take a look at http://zwibbler.com
You can draw some cool shapes using pure CSS.
Check working example at http://jsfiddle.net/yFn6z/1/
Also more way to draw CSS shapes with borders
http://www.vanseodesign.com/css/creating-shapes-with-css-borders/
http://www.sendesignz.com/index.php/css/68-how-to-draw-speech-bubble-and-shapes-with-css3
http://net.tutsplus.com/articles/news/fun-with-css-shapes/
If you want to draw vector shapes of all kinds use Raphaël javascript library.
If its lines and circles, You can use Bresenham's algorithm (Read up more in google, a 1x1px div with the color of your choice represents each point of a line or circle) once the algorithm has been implemented, you can use setAttribute to assign whatever attributes you want to to each line or circle that the user draws and store all the data by separating each shape with some proper delimiters and store it as a text file using FSO. The stored text file can be used as a means to save the users progress.. etc.