View comments | RSS feed

MovieClip.curveTo()

Availability

Flash Player 6.

Usage

my_mc.curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number) : Void

Parameters

controlX An integer that specifies the horizontal position of the control point relative to the registration point of the parent movie clip.

controlY An integer that specifies the vertical position of the control point relative to the registration point of the parent movie clip.

anchorX An integer that specifies the horizontal position of the next anchor point relative to the registration. point of the parent movie clip.

anchorY An integer that specifies the vertical position of the next anchor point relative to the registration point of the parent movie clip.

Returns

Nothing.

Description

Method; draws a curve using the current line style from the current drawing position to (anchorX, anchorY) using the control point specified by (controlX, controlY). The current drawing position is then set to (anchorX, anchorY). If the movie clip you are drawing in contains content created with the Flash drawing tools, calls to curveTo() are drawn underneath this content. If you call curveTo() before any calls to moveTo(), the current drawing position defaults to (0, 0). If any of the parameters are missing, this method fails and the current drawing position is not changed.

You can extend the methods and event handlers of the MovieClip class by creating a subclass. For more information, see "Assigning a class to a movie clip symbol" in Using ActionScript in Flash.

Example

The following example draws a circle with a solid blue hairline stroke and a solid red fill:

this.createEmptyMovieClip("circle_mc", 1);
with (circle_mc) {
   lineStyle(0, 0x0000FF, 100);
   beginFill(0xFF0000);
   moveTo(500, 500);
   curveTo(600, 500, 600, 400);
   curveTo(600, 300, 500, 300);
   curveTo(400, 300, 400, 400);
   curveTo(400, 500, 500, 500);
   endFill();
}

The curve drawn in this example is a quadratic bezier curve. Quadratic bezier curves consist of two anchor points and a control point. The curve interpolates the two anchor points, and curves toward the control point.



The following ActionScript creates a circle using MovieClip.curveTo() and the Math class:

this.createEmptyMovieClip("circle2_mc", 2);
circle2_mc.lineStyle(0, 0x000000);
drawCircle(circle2_mc, 10, 10, 100);
function drawCircle(mc:MovieClip, x:Number, y:Number, r:Number):Void {
   mc.moveTo(x+r, y);
   mc.curveTo(r+x, Math.tan(Math.PI/8)*r+y, Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
   mc.curveTo(Math.tan(Math.PI/8)*r+x, r+y, x, r+y);
   mc.curveTo(-Math.tan(Math.PI/8)*r+x, r+y, -Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
   mc.curveTo(-r+x, Math.tan(Math.PI/8)*r+y, -r+x, y);
   mc.curveTo(-r+x, -Math.tan(Math.PI/8)*r+y, -Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y);
   mc.curveTo(-Math.tan(Math.PI/8)*r+x, -r+y, x, -r+y);
   mc.curveTo(Math.tan(Math.PI/8)*r+x, -r+y, Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y);
   mc.curveTo(r+x, -Math.tan(Math.PI/8)*r+y, r+x, y);
}

An example is also in the drawingapi.fla file in the HelpExamples folder. The following list gives typical paths to this folder:

See also

MovieClip.beginFill(), MovieClip.createEmptyMovieClip(), MovieClip.endFill(), MovieClip.lineStyle(), MovieClip.lineTo(), MovieClip.moveTo()

Comments


No screen name said on Feb 16, 2005 at 4:11 PM :
Why is there a picture of a cubic bezier? Can I draw a cubic bezier using this function?
Joeri Sebrechts said on Mar 30, 2005 at 11:04 PM :
You can easily draw a cubic bezier curve as quadratic curves by taking the midpoint of the curve as end point of the first curve, and beginpoint of the second curve, and then using each control point for those curves.
Nialsh said on May 16, 2005 at 8:58 PM :
No, I don't think so. This is the second code example from above, with a red circle drawn ontop.

this.createEmptyMovieClip("circle2_mc", 2);
circle2_mc.lineStyle(0, 0x000000);
drawCircle(circle2_mc, 200, 200, 100);
function drawCircle(mc:MovieClip, x:Number, y:Number, r:Number):Void {
mc.moveTo(x+r, y);
mc.curveTo(r+x, Math.tan(Math.PI/8)*r+y, Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x, r+y, x, r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, r+y, -Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
mc.curveTo(-r+x, Math.tan(Math.PI/8)*r+y, -r+x, y);
mc.curveTo(-r+x, -Math.tan(Math.PI/8)*r+y, -Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, -r+y, x, -r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x, -r+y, Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y);
mc.curveTo(r+x, -Math.tan(Math.PI/8)*r+y, r+x, y);
mc.moveTo(x+r,y);
mc.lineStyle(0,0xFF0000,100);
for(i = 0;i < Math.PI*2/.05;i += .05){
mc.lineTo(Math.cos(i)*r+x,Math.sin(i)*r+y);
}
}

Notice how the circles don't quite line up if you zoom in.
Joeri's method gets you closer to a cubic bezier but no matter how many divisions you make it will never actually be one.

Neal
Guilt Puppy said on Feb 26, 2006 at 7:20 PM :
The joy of rounded rectangles.

You may have noticed that mixing lineTo and curveTo to build a shape such as a rounded rectangle results in non-uniform results. Code such as
function drawRoundedRectange(w, h, radius) {
outer.lineStyle(1, 0x000000);
outer.beginFill(0xffffff);
outer.moveTo(radius, 0);
outer.lineTo(w-radius, 0);
outer.curveTo(w, 0, w, radius );
outer.lineTo(w, h-radius);
outer.curveTo(w,h, w-radius, h);
outer.lineTo(radius, h);
outer.curveTo(0,h, 0, h-radius);
outer.lineTo(0, radius);
outer.curveTo(0,0, radius, 0);
outer.endFill();
}
results in a shape where you can clearly tell where each curveTo-drawn rope is.
One way to fix it is to convert your lineTo() calls into curveTo() calls. This results in a uniform shape where you truly cannot tell where each lineTo and curveTo call starts and ends.
Our fixed code looks like:
function drawRoundedRectange(w, h, radius) {
outer.lineStyle(1, 0x000000);
outer.beginFill(0xffffff);
outer.moveTo(radius, 0);
outer.curveTo(w-radius, 0, w-radius, 0);
outer.curveTo(w, 0, w, radius );
outer.curveTo(w, h-radius, w, h-radius);
outer.curveTo(w,h, w-radius, h);
outer.curveTo(radius, h, radius, h);
outer.curveTo(0,h, 0, h-radius);
outer.curveTo(0, radius, 0, radius);
outer.curveTo(0,0, radius, 0);
outer.endFill();
}

(Note: it is likely curveTo-drawn shapes are a bit more expensive for the flash player to render. However, in my experience, even with a large amount of curveTo-drawn shapes, I'm not able to perceive any performance decrease. )

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/mx2004/main_7_2/00001494.html