第5节 测量量—时间图像绘制 在利用传感器做实验时，将测量量随时间变化的情况用图像的方式记录下来是很重要的一种方式。这一节我们就来将如何用Flash来绘制测量量-时间图像。
我们仍旧选择上一节中的红外测距传感器，来绘制所测得的距离-时间图像。所以Arduino端的程序与连接都与上节一样，这里不再描述。下面主要介绍Flash端的类编写和Flash动画代码。其实将全部代码写在类里面也可以实现，但是个人觉得不是很灵活，毕竟有时候我们需要将图像挪个位置之类的还是直接可视化操作比较简单。
首先我们先来改写一下上节中的hongwaiceju.as类文件下面就是要添加的语句：
先是三个定义语句：
************************************************************************
public static var msgarray:Array = new Array(); //新建一个名为msgarray的全局数组
public static var ari:Number=0; //新建一个全局变量，用来传递数组指针
var ri:Number=0; //新建一个变量，用来记录数组指针
************************************************************************
就添加在原来的
public static var msg:String;
这句后面。
然后在
***************************************************
while((index = buffer.indexOf(EOL_DELIMITER)) > -1)
{
msg = buffer.substring(0, index);
buffer = buffer.substring(index + 1);
*****************************************************
后面添加：
***********************************************
msgarray[ri]=Number(msg); //将msg变量赋值到msgarray数组
ari=ri; //全局变量指针等于数组指针
ri++; //数组指针加一
**************************************************
上面添加的语句主要实现了将读取到的测量值记录在数组中，之所以这样做是因为待会在动画界面读取数据时，由于帧数的关系，并不是每个测量值都会在每一帧运行时被读到，所以有可能会出现数据遗漏，当然如果动画帧数比传感器采集数据要快可能不会有这个问题，但如果动画帧数比较低时，这个问题就比较严重了。所以这里用一个数组来记录所测量到的数据，在每一帧读取时就不会出现漏数据的情况了。
下面开始制作动画部分，同样新建一个actionscript3.0文件，然后类里面填写hongwaiceju。接下去在新建一个影片剪辑，取名为huitu。然后再huitu影片剪辑的动作代码内添加如下语句：
************************************************************************************
import flash.display.Shape;
var ai:Number=0;
var ii:Number=0;
var msgnum:Number=0;
addEventListener(Event.ENTER_FRAME,onEnterFrame);
var fttuxiang:Shape = new Shape(); //画图线fttuxiang
fttuxiang.graphics.lineStyle(2, 0x990000, .75);
fttuxiang.graphics.moveTo(100, 450);
addChild(fttuxiang);
var ftmask:Shape = new Shape(); //fttuxiang的遮罩层
ftmask.graphics.lineStyle(1, 0x000000);
ftmask.graphics.beginFill(0xff0000);
ftmask.graphics.drawRect(100, 100, 600, 450);
ftmask.graphics.endFill();
this.addChild(ftmask);
fttuxiang.mask=ftmask;
function onEnterFrame(event:Event):void{ //每次运行帧时运行下列语句
while (ai<=hongwaiceju.ari)//如果ai值小于hongwaiceju中的ari，一直执行下列语句
//这样可以读取每两帧间的所有数据。
{ msgnum=Number(hongwaiceju.msgarray[ai]);
fttuxiang.graphics.lineTo(100+ai*5, 550-msgnum*0.5);//图线绘制
ai++;
if(ai>80)//如果图线超过了右边界，则开始向左平移图像
fttuxiang.x=(80-ai)*5;
}
}
*******************************************************
然后再界面上画两条线表示横纵坐标轴，具体位置：x:100 y:100 宽:500 高：450
然后回到主场景，打开库，将库中的huitu拖入主场景，制作完毕，运行后界面如图：
仅仅一个简单的功能演示，你自己可以在坐标轴上加入坐标，或者设定一些按钮来控制图像的大小等等，发挥自己的想象力吧。
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
