Flash/flex Study Notes (20): besell Curve

the beiser curve appears in almost all plotting software, the Code below demonstrates how to use as3.0 to draw a simple besell curve (no document class is used, and a friend who wants to test it, copy the following code to the first frame.)

Import FL. controls. label; var X1: uint = 80; var Y1: uint = 200; var X2: uint = 450; var Y2: uint = 200; var lbl1: Label = new label (); vaR lbl2: Label = new label (); var lbl3: Label = new label (); lbl1.text = "X1, Y1"; lbl2.text = "X2, Y2 "; lbl3.text = "X3, Y3"; addchild (lbl1); addchild (lbl2); addchild (lbl3); lbl1.move (x1-30, Y1 + 5); lbl2.move (X2, y2 + 5); stage. addeventlistener (mouseevent. mouse_move, mousemovehandler); function mousemovehandler (E: mouseevent): void {drawcurve (mousex, Mousey);} function drawcurve (UX: uint, Uy: uint): void {graphics. clear (); // clear graphics. linestyle (1, 0xff0000, 1); // set the line to Red graphics. drawcircle (x1, Y1, 5); // draw a circle at X1, y1 (left endpoint) to mark graphics. drawcircle (X2, Y2, 5); // process a circle in X2, Y2 (right endpoint) and Mark var X3: uint = UX; var Y3: uint = Uy; lbl3.move (X3 + 15, Y3); graphics. drawcircle (X3, Y3, 5); // draw a circle Graphics at the target point. linestyle (0.1,); // sets the line to black and the transparency to 0.1graphics.moveto (x1, Y1); graphics. lineto (X3, Y3); // draw a line graphics from the left endpoint to the target point. moveTo (X2, Y2); graphics. lineto (X3, Y3); // draw a line graphics from the right end to the target point. moveTo (x1, Y1); graphics. lineto (X2, Y2); // draw a line graphics from the left endpoint to the right endpoint. linestyle (1, 0xff0000, 1); // set the line to Red graphics. moveTo (x1, Y1); graphics. curveto (X3, Y3, X2, Y2); // draw a besale curve that starts from the left endpoint, passes through the target point, and ends with the right endpoint} drawcurve ); // when the image is displayed, draw a line at the initial position.

A curve usually contains three points: Start Point (x1, Y1), control point (X3, Y3), and end point (X2, Y2 ).AfterThe point where the mouse is located (X3, Y3). In the y-axis direction, the maximum height of the curve is only half of the relative height of the mouse. If you want to really pass through the mouse, make a correction (that isThe control point is raised or lowered manually.):

The formula is as follows: new coordinate = coordinate of the target point * 2-(coordinate of the start point + coordinate of the end point)/2

That is to say, the first line of the Code is:

 
Graphics. curveto (X3, Y3, X2, Y2 );
 

Changed:

 
Graphics. curveto (2 * X3-(X1 + x2)/2,2 * Y3-(Y1 + y2)/2, X2, Y2 );
 

Next let's take a look at more points. If you just give some points, draw a line based on these points.SmoothThe easiest way to think of a curve is to first draw the first section from 1st points to 3rd points (2nd points are the control points), and then start with 3rd points, draw to 5th points (4th points as Control Points )... and so on.

 var numpoints: uint = 5; const X0 = 50; const Y0 = 50; const x_step = 70; const y_step = 30; // initialize var points: array = new array (); For (var I: Int = 0; I 
  

However, there is a problem in this way, the connections between the curves are not smooth, because it is simply to put the simple strong shapes of each curve together, in order to achieve smooth, we have to use our brains

VaR numpoints: uint = 7; const X0 = 50; const Y0 = 100; const x_step = 70; const y_step = 90; // initialize var points first: array = new array (); For (var I: Int = 0; I <numpoints; I ++) {points [I] = new object (); points [I]. X = x0 + I * x_step; var TY: Int = (I % 2) = 0? Y_step: (-1 * y_step); // trace (TY); points [I]. y = y0 + ty; graphics. linestyle (2, 0xff0000, 1); graphics. drawcircle (points [I]. x, points [I]. y, 3); // mark all the vertices to be more intuitive} // Add the newly added vertex to make it clearer, marked in blue for (I = 1; I <numpoints-2; I ++) {VaR _ XC: Number = (points [I]. X + points [I + 1]. x)/2; VaR _ YC: Number = (points [I]. Y + points [I + 1]. y)/2; graphics. linestyle (3, 0x0000ff, 1); graphics. drawcircle (_ XC, _ YC, 3);} graphics. linestyle (1); // first move the paint brush to the first vertex graphics. moveTo (points [0]. x, points [0]. y); // after removing the first and second points, draw a curve for (I = 1; I <numpoints-2; I ++) {var XC: number = (points [I]. X + points [I + 1]. x)/2; var YC: Number = (points [I]. Y + points [I + 1]. y)/2; graphics. curveto (points [I]. x, points [I]. y, XC, YC);} // process the last vertex graphics. curveto (points [I]. x, points [I]. y, points [I + 1]. x, points [I + 1]. Y );

OK, so it will be smooth. Let's take a look at the principle:
First, ignore the first and last points (why? Because the problem just now lies in the connection points of each section of the curve, and there is no non-smooth problem between the beginning of the first section and the end of the last section of the curve itself, so when we fix it, you do not need to take care of the two ends. Then, insert a new secondary point (that is, the middle blue point) between each point. The point location can be defined as needed, in this example, the center position is obtained, and the newly added Blue Points are treated as the starting point and ending point based on the original header, tail, and two o'clock, view other points as control points (that is, remove the red points after the beginning and end ).
Similarly, we can add three secondary points to close the closed curve:

VaR numpoints: uint = 7; const X0 = 50; const Y0 = 100; const x_step = 70; const y_step = 90; // initialize var points first: array = new array (); For (var I: Int = 0; I <numpoints; I ++) {points [I] = new object (); points [I]. X = x0 + I * x_step; var TY: Int = (I % 2) = 0? Y_step: (-1 * y_step); // trace (TY); points [I]. y = y0 + ty; graphics. linestyle (2, 0xff0000, 1); graphics. drawcircle (points [I]. x, points [I]. y, 3); // to be more intuitive, mark all the vertices} VaR _ x_x_in = (points [0]. X + points [1]. x)/2; VaR _ y_begin = (points [0]. Y + points [1]. y)/2; graphics. linestyle (3, 0x00ff00, 1); graphics. drawcircle (_ x_begin, _ y_begin, 3); // mark the newly added vertex in blue for (I = 1; I <numpoints-2; I ++) {VaR _ XC: Number = (points [I]. X + points [I + 1]. x)/2; VaR _ YC: Number = (points [I]. Y + points [I + 1]. y)/2; graphics. linestyle (3, 0x0000ff, 1); graphics. drawcircle (_ XC, _ YC, 3);} graphics. linestyle (1); // first move the paint brush to the first secondary vertex graphics. moveTo (_ x_begin, _ y_begin); // after removing the first and last two points, draw a curve for (I = 1; I <numpoints-2; I ++) {var XC: Number = (points [I]. X + points [I + 1]. x)/2; var YC: Number = (points [I]. Y + points [I + 1]. y)/2; graphics. curveto (points [I]. x, points [I]. y, XC, YC);} VaR _ Len: uint = points. length; // The second last Green Point VaR _ x_end_1 = (points [_ len-2]. [_ len-1]. x)/2; VaR _ y_end_1 = (points [_ len-2]. Y + points [_ len-1]. y)/2; // The last Green Point VaR _ x_end_2 = (points [_ len-1]. X + points [0]. x)/2; VaR _ y_end_2 = (points [_ len-1]. Y + points [0]. y)/2; // The last blue point is the start point, to _ x_end_1, _ y_end_1, And the last and second red points are the control points graphics. curveto (points [I]. x, points [I]. y, _ x_end_1, _ y_end_1); graphics. curveto (points [_ len-1]. x, points [_ len-1]. y, _ x_end_2, _ y_end_2); graphics. curveto (points [0]. x, points [0]. y, _ x_begin, _ y_begin); graphics. linestyle (3, 0x00ff00, 1); graphics. drawcircle (_ x_end_1, _ y_end_1, 3); graphics. drawcircle (_ x_end_2, _ y_end_2, 3 );

Finally, the above Code is abstracted and encapsulated:

Package {import flash. display. sprite; import flash. events. mouseevent; import flash. events. event; import flash. display. graphics; import flash. UI. mousecursor; import flash. UI. mouse; public class showcurve extends sprite {private var isstop: Boolean; Public Function showcurve (): void {Init ();} private function Init () {stage. addeventlistener (mouseevent. mouse_down, mousedownhandler); addeventlistener (event. enter_fr Ame, enterframehandler); isstop = false; mouse. cursor = mousecursor. Button;} private function mousedownhandler (E: mouseevent) {If (! Isstop) {removeeventlistener (event. enter_frame, enterframehandler); isstop = true;} else {addeventlistener (event. enter_frame, enterframehandler); isstop = false ;}} private function enterframehandler (E: Event): void {graphics. clear (); var numpoints: uint = 9; // initialize var points: array = new array (); For (var I: Int = 0; I <numpoints; I ++) {points [I] = new object (); points [I]. X = stage. stagewidth * Math. random (); points [I]. y = stage. stageheight * Math. random (); graphics. linestyle (2, 0xff0000, 1); graphics. drawcircle (points [I]. x, points [I]. y, 1); // to be more intuitive, mark all the vertices} VaR _ x_x_in = (points [0]. X + points [1]. x)/2; VaR _ y_begin = (points [0]. Y + points [1]. y)/2; graphics. linestyle (1, 0x00ff00, 1); graphics. drawcircle (_ x_begin, _ y_begin, 1); // mark the newly added vertex in blue for (I = 1; I <numpoints-2; I ++) {VaR _ XC: Number = (points [I]. X + points [I + 1]. x)/2; VaR _ YC: Number = (points [I]. Y + points [I + 1]. y)/2; graphics. linestyle (3, 0x0000ff, 1); graphics. drawcircle (_ XC, _ YC, 1);} graphics. linestyle (1); // first move the paint brush to the first secondary vertex graphics. moveTo (_ x_begin, _ y_begin); // after removing the first and last two points, draw a curve for (I = 1; I <numpoints-2; I ++) {var XC: Number = (points [I]. X + points [I + 1]. x)/2; var YC: Number = (points [I]. Y + points [I + 1]. y)/2; graphics. curveto (points [I]. x, points [I]. y, XC, YC);} VaR _ Len: uint = points. length; // The second last Green Point VaR _ x_end_1 = (points [_ len-2]. [_ len-1]. x)/2; VaR _ y_end_1 = (points [_ len-2]. Y + points [_ len-1]. y)/2; // The last Green Point VaR _ x_end_2 = (points [_ len-1]. X + points [0]. x)/2; VaR _ y_end_2 = (points [_ len-1]. Y + points [0]. y)/2; // The last blue point is the start point, to _ x_end_1, _ y_end_1, And the last and second red points are the control points graphics. curveto (points [I]. x, points [I]. y, _ x_end_1, _ y_end_1); graphics. curveto (points [_ len-1]. x, points [_ len-1]. y, _ x_end_2, _ y_end_2); graphics. curveto (points [0]. x, points [0]. y, _ x_begin, _ y_begin); graphics. linestyle (1, 0x00ff00, 1); graphics. drawcircle (_ x_end_1, _ y_end_1, 1); graphics. drawcircle (_ x_end_2, _ y_end_2, 1 );}}}

Note: What we demonstrate in this article is only a quadratic curve. It is more complicated for cubic or higher-order curves. For more information, see Wikipedia: http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A