Flash/flex Study Notes (18): basic use of draw lines and trigonometric Functions

Sprite has a graphics that can be used to draw basic graphics. For example, we want to draw the following graph:

Corresponding as3CodeIs:

 
Package {import flash. display. sprite; public class arrow extends sprite {public function arrow (): void {Init ();} private function Init (): void {graphics. linestyle (1, 0, 1); graphics. beginfill (0xffff99); graphics. drawcircle (0, 0, 2); // center graphics. moveTo (0, 50); graphics. lineto (100,50); graphics. lineto (100,0); graphics. lineto (150,75); graphics. lineto (100,150); graphics. lineto (100,100); graphics. lineto (0,100); graphics. lineto (0, 50); graphics. endfill ();}}}
 

Add it to the stage and automatically follow the mouse (the following code is written in the first frame ):

VaR _ Arrow: Arrow = new arrow (); addchild (_ arrow); _ arrow. X = stage. stagewidth/2-50; _ arrow. y = stage. stageheight/2-75; this. addeventlistener (event. enter_frame, enterframehandler); function enterframehandler (E: Event): void {var DX: Number = mousex-_ arrow. x; var DY: Number = mousey-_ arrow. y; // trace ("dy =" + dy + ", dx =" + dx); var angle: Number = math. atan2 (dy, dx); _ arrow. rotation = angle * 180/math. pi ;}
 

The arc tangent function is used here. Its principle is as follows:

That is, a triangle is built based on the point where the mouse is located and the center of the arrow graph. The tangent is obtained by the adjacent edge of the opposite side, and the angle is obtained by the arc tangent to rotate the angle of the image, the following figure shows the effect:

But it seems a bit problematic. I believe you can see that when drawing a graph, the coordinate origin is the center by default, rather than the central point of the graph. So when you follow the mouse rotation, I always feel a bit wrong. It doesn't matter. Just adjust the arrow. CS

 
Package {import flash. display. sprite; public class arrow extends sprite {public function arrow (): void {Init ();} private function Init (): void {graphics. linestyle (1, 0, 1); graphics. beginfill (0xffff99); graphics. drawcircle (0, 0, 2); // center graphics. moveTo (-75,-25); graphics. lineto (25,-25); graphics. lineto (25,-75); graphics. lineto (75, 0); graphics. lineto (25, 75); graphics. lineto (25, 25); graphics. lineto (-75, 25); graphics. lineto (-75,-25); graphics. endfill ();}}}
 

Another useful trigonometric function is the sine sin function-side-to-edge ratio oblique side.

When the Angle Parameter of the sin function changes from 0 degrees to 360 degrees, the sine function value will swing back and forth between 1 and-1. If it needs to oscillate back and forth in an animation, the sine function comes in handy.

 
Package {import flash. display. sprite; // small ball class public class ball extends sprite {private var radius: Number; // radius private var color: uint; // color public function ball (r: Number = 50, c: uint = 0xff0000) {This. radius = r; this. color = C; Init ();} private function Init (): void {graphics. beginfill (color); graphics. drawcircle (0, 0, radius); graphics. endfill ();}}}
 

Here we first define a basic ball. In the next animation, we let the ball run along the sine trajectory, and the other ball simulates the "Heartbeat" motion (I .e., changing the size)

 var angle: Number = 0; // parameter constant const y_speed = 0.1; // the y-axis moving speed const x_speed = 1; // X axis moving speed const amplitude = 50.0; // maximum amplitude const x_start = 0; // start point of the X axis // variable VAR yspeed: Number = y_speed; var xspeed: number = x_speed; var amplspeed: Number = amplspeed; var B: ball = new ball (5, 0xff0000); addchild (B); B. X = x_start; var heart: ball = new ball (50, 0x0000ff); addchild (Heart); heart. X = stage. stagewidth/2; heart. y = stage. stageheight/2; heart. alpha = 0.3; addeventlistener (event. enter_frame, enterframehandler); function enterframehandler (E: Event) {B. y = stage. stageheight/2 + math. sin (angle) * amplspeed; angle + = yspeed; B. X + = xspeed; heart. scalex = heart. scaley = 1 + math. sin (angle) * 0.5; graphics. linestyle (1, 0 xefefef, 1); graphics. lineto (B. x, B. y); // X, Y, and the amplitude is gradually increased by xspeed + = 0.08; yspeed + = 0.003; amplitude + = 1; if (B. x> stage. stagewidth + B. width) {// restore parameter B after the stage is exceeded. X = x_start; xspeed = x_speed; yspeed = y_speed; amplitude = amplitude ;}

You can even apply the sine function to multiple attributes at the same time:

 // parameter constant const y_speed = 0.07; // the Y axis Variable Speed const x_speed = 0.10; // the X axis Variable Speed const amplitude = 150.0; // maximum amplitude const x_start = stage. stagewidth/2; // start point of the X axis const y_start = stage. stageheight/2; // start point of the Y axis // variable VAR yspeed: Number = y_speed; var xspeed: Number = x_speed; var amplitude: Number = ampllex; var anglex = 0; vaR angley = 0; var B: ball = new ball (5, 0xff0000); addchild (B); B. X = x_start; B. y = y_start; graphics. moveTo (B. x, B. y); addeventlistener (event. enter_frame, enterframehandler); function enterframehandler (E: Event) {B. y = y_start + math. sin (angley) * amplley; B. X = x_start + math. sin (anglex) * ampllex; anglex + = xspeed; angley + = yspeed; // anglex + = math. random ()/10; // angley + = math. random ()/5; graphics. linestyle (1, 0 xefefef, 1); graphics. lineto (B. x, B. y) ;}

If you enable the two lines of comments in the code, that is, change the speed of X and Y to random, the results may be more interesting: