I need to embed a vector graphical editor into my flash web app. A graphicla editor should be able to do following:
- draw lines (brush tool)
- erase
- scale drawing
- create text blocks
- use image as background of drawing (upload an image and use it as background).
Changes made by user should be sent to other active clients. I’m trying to find answers to following questions.
- How drawing a line should be implemented? I mean: a user moves mouse over the screen (with left button of mouse down), how should I handle MOUSE_MOVE event? Note that after drawing a user can wish to scale drawing.
- How erasing should be implemented? Note that I can’t implement erasing as drawing white lines (as I can have a background).
- What is the best way to store the drawwing? Serializing a set of commands?
- And finally how is it possible to inform other clients about changes?
Will be grateful for any articles or tutorial on how to create graphical editors similar to described (no matter on what platform or programming language).
And please don’t be shy 🙂 Any thoughts are strongly appreciated!
I’ll try to answer some of the questions, because I never did all of it.
Depends on the tool, the most simple to implement is a pencil tool that draws straight lines only. More complex tools, like pencil that should follow the anchors you can move isn’t actually that different, in fact, is very easy as you would need to simply use the anchors parameters you receive from the user. The most complex tool is the following the brush as it arbitrary moves across the canvas. You would need to implement “union” operation for vector shapes. This isn’t easy and requires some math to find the intersection points. There must be specialized literature that describes how to do that. You would need to create smaller shapes, sampling at discrete intervals the position of the mouse pointer and then “union” them together.
Erasing is very similar to the brush tool described above.
I would write SWF format, worst case – SVG. The advantage of SWF would be that it is easy to use the drawings in the same program / environment. The advantage of SVG is that you can use it even where Flash is not available.
Perhaps a good starting point might be in looking into Inkscape sources (probably the most popular open-source vector graphics editor). Frankly… it’s a buggy / unstable program, but at least some of it should work.