Home >
My last few posts on the Flash/Flex/ActionScript drawing API gave me a few ideas... Everyone always says how it reminds them of old-school programming in BASIC or Pascal. I decided to make it easier for anyone to play with the drawing API, without having to compile any programs for themselves. I call this the "Drawing API Explorer". Using the drawing API explorer application, you don't have to override updateDisplayList or anything. All of the hard work is done.
This example uses runtime code evaluation to draw shapes using the ActionScript drawing API. Check it out below!
There are two tabs. The first tab allows you to type in code that will be executed when you click on the "run" button. The second tab shows you a bunch of ActionScript drawing API examples. Just click on an example name in the left, and the code will be displayed. You can run the examples by clicking on the "run this example" button, or you can edit the example code by clicking on the "edit this example" button. When you click on the "edit" button, it will switch over to the first tab and paste the code into there.... Be careful! It will clear whatever was in there previously.
You can use any kind of loops, if-statements, switch statements, etc... It supports all methods of the Graphics, Math, and Matrix ActionScript classes. You can use the variable g to represent the graphics object, the variable w to represent the draw target area width, and the variable h to represent draw target area height. I have tried the following, and know they work:
- g.lineStyle
- g.beginFill
- g.endFill
- g.moveTo
- g.lineTo
- g.curveTo
- g.drawRect
- g.drawRoundRect
- g.drawCircle
See the ActionScript drawing API documentation for more information about the drawing API syntax and capabilities.
Go ahead and test it out here:
The runtime code evaluation uses the D.eval() code library. The D.eval() API is a SWC library for Flex applications that enables the runtime generation and execution of code and expressions in ActionScript 3.
You can launch this application in a new window here:
http://www.tricedesigns.com/portfolio/DrawingAPIExplorer/DrawingAPIExplorer.html
View the source code here:
http://www.tricedesigns.com/portfolio/DrawingAPIExplorer/srcview/index.html
Or, download the source code here:
http://www.tricedesigns.com/portfolio/DrawingAPIExplorer/srcview/DrawingAPIExplorer.zip
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Very cool example!
Will experiment with that.
Thanks!
still trying to figure out whether id needs compiling or not ?
great... its very use full for me.
thanks.
Thank you so much for this awesome work!
Hi Andrew
This is all very nice.
I just need to know how to draw semicircle with using curve.
Can u provide some example please?
To draw a semi-circle take a look at the drawWedge code in the following article:
http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html
Nice Post. Got some ideas I was looking for. One thing that I want to know more about is the option of erasing the drawings on a canvas. What if I want to erase a limited portion of a circle without removing the entire object?
I mean that if there is an image that I am working on and I draw some custom lines on it. How will I remove the line that is a bit misplaced from the target if the option of Undo is not there. Unlike MS Paint, where the eraser actually fills the space with selected color rather than removing the drawing. e.g, if you are editing a photo and you select the eraser, it leaves the mark on the photo which is strictly unwanted.
Can anybody help ?
Regards,
Alex Fisherr