Flash/Flex学习笔记(18):画线及三角函数的基本使用

Sprite有一个graphics可以用来绘制基本图形,比如我们要画下面这个图形:

对应的AS3代码为:

view source

print?

01
package {

02
import flash.display.Sprite;

03

04
public class Arrow extends Sprite {

05
public function Arrow():void {

06
init();

07
}       

08
private function init():void{               

09
graphics.lineStyle(1,0,1); 

10
graphics.beginFill(0xffff99);

11
graphics.drawCircle(0,0,2);//中心点

12
graphics.moveTo(0,50); 

13
graphics.lineTo(100,50);

14
graphics.lineTo(100,0);

15
graphics.lineTo(150,75);

16
graphics.lineTo(100,150);

17
graphics.lineTo(100,100);

18
graphics.lineTo(0,100);

19
graphics.lineTo(0,50);

20
graphics.endFill();         

21
}

22
}

23
}

把它加到舞台上,并自动跟着鼠标转动(下列代码写在第一帧):

view source

print?

01
var _arrow:Arrow = new Arrow();

02
addChild(_arrow);

03
_arrow.x=stage.stageWidth/2-50;

04
_arrow.y=stage.stageHeight/2-75;

05

06
this.addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

07

08
function EnterFrameHandler(e:Event):void {

09
var dx:Number=mouseX-_arrow.x;

10
var dy:Number=mouseY-_arrow.y;

11
//trace("dy=" + dy + ",dx=" + dx);

12
var angle:Number=Math.atan2(dy,dx);

13
_arrow.rotation=angle*180/Math.PI;  

14
}

这里用到了反正切函数,其原理示意图如下:

即以鼠标所在点与Arrow图形中心点为参考,构建一个三角形,利用对边比邻边得到正切,然后利用反正切求出角度,最终让图形旋转该角度,下面是效果:

但是好象有点问题,相信您也看出来了,因为我们绘制图形时,默认是以坐标原点为中心,而非图形中心点为中心,所以在跟随鼠标旋转时,总感觉有些错位,没关系,只要调整一下Arrow.cs即可

view source

print?

01
package {

02
import flash.display.Sprite;

03

04
public class Arrow extends Sprite {

05
public function Arrow():void {

06
init();

07
}       

08
private function init():void{               

09
graphics.lineStyle(1,0,1); 

10
graphics.beginFill(0xffff99);

11
graphics.drawCircle(0,0,2);//中心点

12
graphics.moveTo(-75,-25); 

13
graphics.lineTo(25,-25);

14
graphics.lineTo(25,-75);

15
graphics.lineTo(75,0);

16
graphics.lineTo(25,75);

17
graphics.lineTo(25,25);

18
graphics.lineTo(-75,25);

19
graphics.lineTo(-75,-25);

20
graphics.endFill();         

21
}

22
}

23
}

另一个很有用的三角函数就是正弦Sin函数--对边比斜边

当Sin函数的角度参数从0度变化到360度时,正弦函数的值会在1到-1之间来回摆动,如果在动画中需要来回振荡的情况,正弦函数就派上用场了

view source

print?

01
package{

02
import flash.display.Sprite;

03

04
//小球 类

05
public class Ball extends Sprite{

06

07
private var radius:Number ;//半径

08
private var color:uint;//颜色

09

10
public function Ball(r:Number=50,c:uint=0xff0000){

11
this.radius = r;

12
this.color = c;

13
init();

14
}

15

16
private function init():void{

17
graphics.beginFill(color);

18
graphics.drawCircle(0,0,radius);

19
graphics.endFill();

20
}

21
}

22
}

这里我们先定义一个基本的小球类Ball,在接下来的动画里,我们让小球沿正弦轨迹运行,同时另一个小球模拟“心跳”运动(即改变大小)

view source

print?

01
var angle:Number = 0;

02

03
//参数常量

04
const Y_SPEED = 0.1; //y轴移动速度

05
const X_SPEED = 1; //x轴移动速度

06
const AMPLITUDE = 50.0; //最大振幅

07
const X_START = 0; //x轴的起始点

08

09
//变量

10
var ySpeed:Number = Y_SPEED;

11
var xSpeed:Number = X_SPEED;

12
var amplitude:Number = AMPLITUDE;

13

14
var b:Ball = new Ball(5,0xff0000);

15
addChild(b);

16
b.x = X_START;

17

18
var heart:Ball = new Ball(50,0x0000ff);

19
addChild(heart);

20
heart.x = stage.stageWidth/2;

21
heart.y = stage.stageHeight/2;

22
heart.alpha = 0.3;

23

24
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

25

26
function EnterFrameHandler(e:Event){

27
b.y = stage.stageHeight/2 + Math.sin(angle) * amplitude;

28
angle += ySpeed;

29
b.x += xSpeed;

30

31
heart.scaleX = heart.scaleY = 1 + Math.sin(angle) * 0.5;

32

33
graphics.lineStyle(1,0xefefef,1);

34
graphics.lineTo(b.x,b.y);

35

36

37
//x,y,振幅 逐渐加大

38
xSpeed += 0.08;

39
ySpeed += 0.003;

40
amplitude += 1;

41

42
if (b.x > stage.stageWidth + b.width){

43
//超出舞台后,还原参数

44
b.x = X_START;

45
xSpeed = X_SPEED;

46
ySpeed = Y_SPEED;

47
amplitude = AMPLITUDE;

48
}   

49

50
}

甚至还可以同时把正弦函数应用到多个属性:

view source

print?

01
//参数常量

02
const Y_SPEED = 0.07; //y轴变化速度

03
const X_SPEED = 0.10; //x轴变化速度

04
const AMPLITUDE = 150.0; //最大振幅

05
const X_START = stage.stageWidth/2; //x轴的起始点

06
const Y_START = stage.stageHeight/2; //y轴的起始点

07

08
//变量

09
var ySpeed:Number = Y_SPEED;

10
var xSpeed:Number = X_SPEED;

11
var amplitude:Number = AMPLITUDE;

12
var angleX = 0;

13
var angleY = 0;

14

15
var b:Ball = new Ball(5,0xff0000);

16
addChild(b);

17

18
b.x = X_START;

19
b.y = Y_START;

20

21
graphics.moveTo(b.x,b.y);

22

23
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

24

25
function EnterFrameHandler(e:Event){    

26

27
b.y = Y_START + Math.sin(angleY) * amplitude;

28
b.x = X_START + Math.sin(angleX) * amplitude;

29

30
angleX += xSpeed;

31
angleY += ySpeed;

32

33
//angleX += Math.random()/10;

34
//angleY += Math.random()/5;

35

36
graphics.lineStyle(1,0xefefef,1);

37
graphics.lineTo(b.x,b.y);

38
}

如果把代码中的二行注释启用,即让x,y的变化速度改成随机,结果可能更有趣:

原文地址:https://www.cnblogs.com/happysky97/p/1884513.html