Wednesday, November 17, 2010

Drawing shapes using AS3: Part 2

Today we'll learn how to draw curved lines using AS3.

This is really simple. Basically, it is just a normal line but with a control point - the point, that drags the curve to itself. Let me show you:


As you can see, to create a curved line, you only need 3 points - starting point, control point and the end point. We set the start point by moving our imaginary cursor (moveTo();) and use the curveTo(); method to draw the curve. We need to specify the X and Y of control point and the end point.

The syntax:

myShape.graphics.curveTo(controlpoint_X, controlpoint_Y, endpoint_X, endpoint_Y);

Here's an example:

var myShape:Shape = new Shape();
addChild(myShape);

myShape.graphics.lineStyle(1, 0xFF0000, 1); 
myShape.graphics.moveTo(50, 50); 
myShape.graphics.curveTo(75, 10, 100, 50); 

Thanks for reading!

Related:

Drawing shapes using AS3: Part 1
Drawing shapes using AS3: Part 3
Drawing shapes using AS3: Part 4
Drawing shapes using AS3: Part 5
Drawing shapes using AS3: Part 6
Drawing shapes using AS3: Part 7
Drawing shapes using AS3: Part 8

No comments:

Post a Comment