The fourth chapter of Flash Basic theory class rendering technology Ⅱ

Back to "flash Basic Theory Class-Catalog"

Drawing curves using Curveto

Next drawing function, Curveto (x1, y1, x2, y2), starting from the same point as the LineTo, is the same as the end of the drawing line as the starting point for this line, you can also use the MoveTo command to specify the beginning of the brush, if the first line draw the default starting point for 0, 0.

As you can see, the Curveto function includes two points. The first is that the control point affects the shape of the curve, and the other is the end of the curve. Here we use a standard formula called Two Bezier curve, which calculates the curve between two points, which bends toward the control point. Note that this curve does not touch the control point, much like the curve is attracted by it.

Here's a look at the action script, document class Drawingcurves.as:

package {
　import flash.display.Sprite;
　import flash.events.MouseEvent;
　public class DrawingCurves extends Sprite {
　 private var x0:Number = 100;
　 private var y0:Number = 200;
　 private var x1:Number;
　 private var y1:Number;
　 private var x2:Number = 300;
　 private var y2:Number = 200;
　 public function DrawingCurves() {
　　 init();
　 }
　 private function init():void {
　　 stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
　 }
　 private function onMouseMove(event:MouseEvent):void {
　　 x1 = mouseX;
　　 y1 = mouseY;
　　 graphics.clear();
　　 graphics.lineStyle(1);
　　 graphics.moveTo(x0, y0);
　　 graphics.curveTo(x1, y1, x2, y2);
　 }
　}
}

Test the file and move the mouse back and forth. Here you use the two given points as the starting point and end point, using the mouse position as the control point. Note that the curve does not actually reach the control point position, but only half the position with the control point.

The curve of the over control point

Now, if you want the curve to really go through the control point, then this is another tool in our toolbox. Use the formula below to calculate the actual position of the control point so that the curve passes through the specified point. Similarly, take x0,y0 as the starting point, take x2,y2 as the endpoint, x1,y1 as the control point, the point that will go through is called XT,YT (Target point). In other words, if you let the curve pass through the xt,yt point, then how do x1,y1 need to use it? The formula is as follows:

x1 = xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;

Just multiply the target point by 2 and subtract the average of the start and end points. You can draw a picture to see how it works, or learn to use it directly.

Put the formula in the code, mouse coordinates using XT,YT, we only need to change the previous document class two lines, the following two lines:

x1 = mouseX;
y1 = mouseY;

Replaced by

x1 = mouseX * 2 - (x0 + x2) / 2;
y1 = mouseY * 2 - (y0 + y2) / 2;

Or look directly at the curvethroughpoint.as, ready-made documents.