Here’s my first flex related post. The drawable canvas is a really simple little component that I put together after my work mate Alex explained to me how easy it is to draw on things in flex.
Click on the image below to view the application. Right click on the application to view source.
- The component itself is a transparent canvas (background alpha = 0), which means that you can put it on top of anything you like in order to be able to draw anywhere.
- On the mouse down event I add a mouse move listener which adds points to an array, and I remove the listener on the mouse up event. These arrays are the lines.
- In the updateDisplayList method I loop through all the held arrays and draw them onto the canvas.
There’s nothing really technically amazing here, but it was a fun little app to build. I did run into a few interesting problems though:
- You can’t assign event listeners to a component from inside itself. Ie. this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) doesnt work. That’s why I had to create another object to do the listening.
- Also, when I set the background alpha on the canvas to be 1, I found that the canvas drew itself on top of the lines, even though I drew the lines after calling super.updateDisplayList();
If anyone can shed some light on those issues for me, that would be cool. Hopefully I’ll find time soon to finish off some of my other little projects and post them up here aswell.
Genetic Algorithm Simulator in Flex »« First Post
Nice component, very smooth,
As far as your issues go, I can only suggest extending UIComponent instead of Canvas, This will save you problems with the superclass’ updateDisplayList etc.
I’ve found a bug in the actionscript, the player goes crazy if you move outside the component while drawing and go back inside without releasing the click. This fix seems to be the solution:
private function upEvent(event:MouseEvent):void {
if (_target.hasEventListener(MouseEvent.MOUSE_MOVE))
_target .removeEventListener(MouseEvent.MOUSE_MOVE, moveEvent);
}
I forgot, great stuff anyway!
I’m running the latest version of the Flash Player, and I can’t seem to replicate the bug.
Thanks for your comment though!
hi,
I’m not a developer, but I experienced a bug : after a certain number of lines, each new lin makes an old one disappear (is there a limitation ?) – FF 2.0.0.7 running on WIn XP
that’s all.
good luck
Yes, I limit the number of lines to 10. There’s no reason why it has to be that way. I just added a limit out of habbit 
I removed the limit in my custom program but it get horribly slow after a bunch of lines 
Tony knew what he was doing.
It’s a problem related to the vectorial nature of the lines. I think that bitmap drawing is the way… however actionscript haven’t api functions to do this. Maybe one could draw vector lines and periodically save a bitmap image of the whiteboard, cleaning all the vector data. I don’t know and haven’t enough time to study it at the moment.
If I remove the backgroundColor property from the DrawableCanvas, it stops drawing new lines after some time. However it draws the line if I start the new line from a point over any existing line. I can’t figure out how could this happen by removing backgroundColor. Any suggestions??
This isn’t 100% true:
“You can’t assign event listeners to a component from inside itself. Ie. this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) doesnt work.”
You definitely can in at least some cases. Maybe it’s specifically when we’re talking Canvases? You can definitely do it at the Application tag level.
if I draw ten lines and each line has different color then what should I do.because if I dynamically change the line color, the color of all lines get changed.
You would need to store the line color in the array of lines also (one color for each line), and then use this value when drawing the lines
Found a problem of the drawn lines “bleeding” through outside its canvas.
Draw something near the edge of the thing, then resize your browser, the lines will somehow go outside…
