| MovieClip.curveTo( ) Method | Flash 6 |
mc.curveTo(controlX, controlY, anchorX, anchorY)
Arguments - controlX
-
The horizontal position of the off-curve control point of the quadratic Bezier curve, as a floating-point number. Measured relative to mc's registration point. - controlY
-
The vertical position of the off-curve control point of the quadratic Bezier curve, as a floating-point number. Measured relative to mc's registration point. - anchorX
-
The horizontal end position of the curve to be drawn, as a floating-point number. Measured relative to mc's registration point. - anchorY
-
The vertical end position of the curve to be drawn, as a floating-point number. Measured relative to mc's registration point. Description The curveTo( ) method draws a quadratic Bezier curve from the current drawing pen position to the point (anchorX, anchorY) using an off-curve control point of (controlX, controlY). The tangents to the curve at the start and end points both pass through the control point. Conceptually speaking, the straight line that would run from the pen position to the end point (anchorX, anchorY) is pulled by the control point (controlX, controlY) to make a curve. An alternate method that draws a curve through three specific points and does not require the user to supply a control point is shown in the following Example. The stroke characteristics of the curve (thickness, color, alpha) are determined by the most recent call to lineStyle( ).  | If lineStyle( ) hasn't been called, the stroke style will be undefined. In that case, curveTo( ) moves the drawing pen position to (anchorX, anchorY), exactly as if moveTo( ) had been called, but does not draw a curve on screen. | | The curve, when drawn, appears above all Drawing API content already in mc, but beneath all other content in mc (e.g., movie clips, shapes, text, and buttons placed at authoring time, or content attached at runtime via attachMovie( ), duplicateMovieClip( ), or createTextField( )). The following code creates a movie clip named drawing_mc and draws a 4-point black curve from the drawing pen's default position (0,0) to the anchor point (100,0) using the control point (50,-100). The resulting curve is shown in Figure 18-3. // Create a clip to draw in this.createEmptyMovieClip("drawing_mc", 1); // Set the stroke to 4-point, black drawing_mc.lineStyle(4); // Draw the curve drawing_mc.curveTo(50, -100, 100, 0); // Center the drawing clip on the Stage drawing_mc._x = 200; drawing_mc._y = 225;  After a curve is drawn, the drawing pen remains at the end point of the curve. Here, multiple calls to curveTo( ) and/or lineTo( ) can be used to draw complex curves or closed shapes, such as circles and polygons. For details, see Example 18-2 under MovieClip.beginFill( ). If any of curveTo( )'s arguments are missing, the operation fails silently and the position of the drawing pen remains unchanged. For a description of the drawing pen, see the Discussion under MovieClip.moveTo( ). For a primer on Bezier curve mathematics and programming, see: - http://www.ipm.sci-nnov.ru/~demidov/VRML/Splines/Intro/Bezier.htm
Example Sometimes it is more convenient to specify three points on a curve rather than two anchor points and a control point. The following code adds a custom curveThrough3Pts( ) method to all movie clips; the method accepts three points as arguments and draws a quadratic curve that passes through them. The second point is assumed to be halfway along the curve, in time (t = .5): // Adapted from Robert Penner's drawCurve3Pts() method MovieClip.prototype.curveThrough3Pts = function (startX, startY, throughX, throughY, endX, endY) { var controlX = (2 * throughX) - .5 * (startX + endX); var controlY = (2 * throughY) - .5 * (startY + endY); this.moveTo(startX, startY); this.curveTo(controlX, controlY, endX, endY); }; // Usage this.createEmptyMovieClip("drawing_mc", 1); drawing_mc.lineStyle(1, 0xFF0000); drawing_mc.curveThrough3Pts(100, 100, 150, 50, 200, 100); See Also MovieClip.beginFill( ), MovieClip.beginGradientFill( ), MovieClip.clear( ), MovieClip.curveTo( ), MovieClip.endFill( ), MovieClip.lineStyle( ), MovieClip.lineTo( ), MovieClip.moveTo( ) |
