07 September 2009

Curves and Fills with AS3 Drawing API

After I learned to draw straight lines with ActionScript 3.0 it’s time to go further and to see what else can I accomplish using ActionScript 3.0 Drawing API.

There are several built-in functions for drawing simple shapes like drawCircle(), drawEllipse(), drawRect() and drawRoundRect() for rectangles. Since almost every complex shape is some combination of simple ones these functions are solid ground to start with.

One interesting thing about fills is that overlapping shapes change the way fill is displayed. If you have two overlapping circles their intersection is without fill. Take a look at this code:


import flash.display.*;
var d:Sprite = new Sprite();
d.graphics.lineStyle(1, 0x000000);
d.graphics.beginFill(0xff0000, 1);
d.graphics.drawCircle(200, 200, 100);
d.graphics.drawCircle(300, 200, 100);
d.graphics.endFill();
addChild(d);


Result is shown on image below. It seems that any area within even number of shapes is without fill and area within odd number of shapes has its fill intact.

two circles intersection


We have to pay attention about this to avoid unwanted things, but this also can be used to create some interesting effects. Next code uses for loop to draw several overlapping circles:


import flash.display.*;
var d:Sprite = new Sprite();
var i:uint;
d.graphics.lineStyle(1, 0x000000);
d.graphics.beginFill(0xff0000, 1);
for(i= 0; i<10; i++) {
d.graphics.drawCircle(200, 200, (i*5)+50);
d.graphics.drawCircle(300, 200, (i*5)+50);
}
d.graphics.endFill();
addChild(d);


Here is the output:

multiple circles overlapping


As I mentioned in previous post about drawing, best practice to draw lines and shapes with ActionScript 3.0 is to use rulers or even better plain paper with Flash coordinate system. This advice is valuable even more for drawing curves because you have two extra parameters for control point, its X and Y coordinates. Here is just one example for now, more of them probably in separate post when I have more time.


import flash.display.*;
var d:Sprite = new Sprite();
d.graphics.lineStyle(2, 0x000000);
d.graphics.beginFill(0xff0000, 1);
d.graphics.moveTo(100, 100);
d.graphics.lineTo(200, 100);
d.graphics.curveTo(250, 150, 200, 200);
d.graphics.lineTo(100, 200);
d.graphics.curveTo(-50, 150, 100, 100);
d.graphics.moveTo(200, 100);
d.graphics.curveTo(150, 150, 200, 200);
d.graphics.endFill();
addChild(d);


drawing curves with AS3 API


*_*

4 comments:

Keith Peters said...

The fills work that way only if you draw multiple overlapping paths within the same begin/end fill block. If you say beginFill, draw, endFill, beginFill, draw, endFill, you won't see the intersection. But as you say, you can use the behavior to your advantage.

Also, the Flash 10 drawing API additions give you a LOT more control over this type of behavior. Check out the GraphicsPathWinding class.

flanture said...

Keith, thanks for your comment I appreciate it. For now, Astro is still something I'm only planning to learn, basics first :) thanks

venkat said...

Hi Flanture,

I have a problem, please see the below steps
i)Draw two circles with filled colors
ii) Draw a line between two cicles with different color.

Here i am able to get the line between two circles, but the problem is the line is overrided by the circle graphics within the part.
my question is can i draw a line over the circle.

flanture said...

hi Venkat, maybe something like this:

import flash.display.*;
var d:Sprite = new Sprite();
d.graphics.lineStyle(1, 0x000000);
d.graphics.beginFill(0xff0000, 1);
d.graphics.drawCircle(150, 200, 50);
d.graphics.drawCircle(350, 200, 50);
d.graphics.endFill();
// change line style
d.graphics.lineStyle(2, 0x000000);
d.graphics.moveTo(150, 200);
d.graphics.lineTo(350, 200);
addChild(d);

 

template by blogger templates