数与图（10）——跳动的心脏

在《数与图（9）》中，我们绘制了一条类似心电图形的曲线，其函数表达式为

y =(x+3.6)*(x+2.5)*(x+1)*(x-0.5)*(x-2)*(x-3.5)* e^-x*x/4

本篇文章将在屏幕上添加一个小球，让小球从曲线的左端开始，沿着曲线移动到曲线的右端，为此，需要在项目中添加两个组件：计时器组件及球精灵组件，改写并添加相关的程序。

一、添加组件

打开《数与图（9）》中的项目，向画布中添加球组件，它的默认半径为5像素，设它的颜色为橙色；再添加计时器组件，设它的计时间隔为10（毫秒），并取消勾选“一直计时”及“启用计时”属性；另外，删除掉原来“水平布局4”中的三个“开关”组件，添加两个按钮组件，分别命名为“画曲线按钮”及“移动球按钮”，如图1所示。

图1 在项目中添加计时器及球精灵组件

二、编写程序

球沿曲线的移动，实际上是球心坐标与曲线坐标依次重合的过程，因此我们需要重复利用曲线坐标数据，为此，需要创建两个全局变量，将绘制曲线所需的x、y保存在列表中，稍后再利用这些坐标来实现球的移动。

1、改写原有的“绘制曲线”过程

首先声明两个全局变量——x列表、y列表，然后将“绘制曲线”过程改名为“求曲线数据列表”，将原来绘制曲线的代码改为求坐标的代码，如图2所示。

图2 修改原有“绘制曲线”过程

2、创建新的“绘制曲线”过程

在新的“绘制曲线”过程里，利用针对数字的循环语句，遍历x列表和y列表，利用现成的数据绘制曲线，代码如图3所示。

图3 创建新的“绘制曲线”过程

3、开始绘制曲线

编写画曲线按钮的点击事件处理程序，代码如图4所示。每次点击该按钮时，首先清空两个坐标列表，然后调用“求曲线坐标列表”及“绘制曲线”过程。

图4  画曲线按钮的点击事件处理程序

4、启动计时器

首先声明一个全局变量——索引值，用它来记录球的当前x坐标在x坐标列表中的位置，稍后在计时器的计时事件中改变该索引值。代码如图5所示。

图5 在移动球按钮的点击事件处理程序中启动计时器

5、开始移动球

编写计时器的计时事件处理程序，沿着曲线坐标，每隔10毫秒更新一次球的位置，就形成了球的连续移动，代码如图6所示。需要注意的是，球精灵的坐标基准点在球的左上角，也就是球的外切矩形的左上角，因此要为求的坐标减去5，以便让圆心（球心）恰好位于曲线上。

图6  在计时事件中实现球的移动

三、测试

首先点击“画曲线”按钮，然后点击“移动球”按钮，测试结果如下面视频所示。

四、讨论

本篇文章所采用的绘图技术，其关键方法是“计算与渲染”分离，即，先计算并保存曲线的坐标，然后再根据坐标完成图形的绘制，所谓渲染，就是在屏幕上显示图像。虽然在本文中好像是为了移动球不得已而为之，实际上，这个方法广泛应用于绘制数据量巨大且复杂的图形。在计算机看来，计算和渲染是两类不同类型的操作，将同一类操作集中处理，可以提高数据处理的速度。

以上我们利用10篇文章的篇幅介绍了与绘制函数图像有关的技术与方法，实现了在手机屏幕的方寸之间，对时间及空间因素的控制，这些方法将成为后续文章的基础。