数与图（1）
App Inventor的画布组件，相当于一个平面直角坐标系，画布上的任何一点都可以用一对坐标（x,y）加以描述，而画布具有画笔的功能，可以在指定位置绘制点、线、圆等基本图形，这就使得开发者可以用程序在画布上绘图，如果配合上计时器，还可以在二维时空中表现动画效果。
本系列文章将结合中学的数学及物理知识，利用画布和计时器组件的时空定位功能，展现程序的魅力。
首先要了解的是画布的空间定位功能，为此我们将利用程序绘制一个数学中的平面直角坐标系，结果如图1所示。本文的目的就是绘制这样的坐标系。
图1 用程序绘制的平面直角坐标系
一、数学中直角坐标系的基本要素
初中数学中学过数轴，它是一根直线，有三个基本要素：原点、正方向及单位长度。在平面直角坐标系中，这样的数轴有两根，即，沿水平方向x轴，以及沿垂直方向的y轴，数轴的基本要素也同样适用于平面直角坐标系。
1、原点：x轴与y轴相互垂直，且原点重合，在绘制坐标系时，通常将原点画在坐标系的中心；
2、正方向：x轴的正方向指向右方，y轴的正方向指向上方；
3、单位长度：两个刻度之间的距离。数学课本中的x、y轴的单位长度是相同的，如图2中所示的坐标纸。但在描述现实问题时，两个轴所代表的物理量有可能存在数量级的差别，因此，两个轴会采用不同的单位长度，如图1中所示的坐标系。
4、角度：x轴正向为0度角，逆时针为角度增加的方向。
图2 用于精确绘制图形的坐标纸
二、 坐标纸的基本要素
坐标纸上绘制的是直角坐标系，与数学中的坐标系相比，原点位置和y轴的正方向有所不同。
1、原点：从图2的坐标纸可以推测，坐标系的原点在左上角；
2、正方向：x轴的正方向向右，y轴的正方向向下；
3、单位长度：两条细线之间的距离为单位长度；
4、主间距：坐标纸中每隔10条细线会有一条粗线，两条粗线之间的距离称为主间距；
5、辅间距：坐标纸中每隔5条细线会有一条中粗线，两条中粗线之间的距离为辅间距；
6、最大值、最小值：坐标纸上x轴、y轴的最小值均为0，最大值依赖于纸张的宽和高（图2中y轴最大值分别为17和25）。
三、画布坐标系的基本要素
画布坐标系也是平面直角坐标系，它的原点位置及y轴正方向与坐标纸相同。
1、原点：画布坐标系的原点位于画布的左上角；
2、正方向：向右为x轴正方向，向下为y轴正方向；
3、单位长度：像素。像素是屏幕上最小的显示单元。在图3中，手机的屏幕宽度约为6.7cm，在这个宽度内，有1080个像素，平均每毫米包含16个像素。
4、角度：x轴正方向为0度，与数学中的直角坐标系不同的是，角度沿顺时针方向增大。
图3 手机的几何尺寸与分辨率
四、程序坐标系的基本要素
本文中所称的程序坐标系，指的是在画布（坐标系）中绘制的数学坐标系，它具有数学坐标系的基本要素，有坐标纸一样的网格，不同的是，它的原点位置、最大值、最小值、单位长度及主、辅间距是可变的。
1、画布尺寸：本文中画布的宽度为350像素，高度为550像素；
2、绘图区域：根据画布的宽高设置绘图区的宽高，本文中绘图区四周距画布边缘25像素；
3、最大值、最小值：用户可以根据绘图需要，自行设定x轴、y轴的最大值和最小值；
4、缩放比例：坐标轴单位长度中所包含的像素数，两个坐标轴可以采用不同的缩放比例：
x轴缩放比例：绘图区宽度/（x轴最大值 - x轴最小值）；
y轴缩放比例：绘图区高度/（y轴最大值 - y轴最小值）；
5、原点：根据两个坐标轴的最大值、最小值确定原点的位置；
6、单位长度：两个坐标轴可以采用不同的单位长度，可以根据绘图需要自行设定；
7、辅间距：本文例子中将辅间距与单位长度合二为一；
8、主间距：根据需要设定主间距，本文中以5个单位长度为一个主间距，如图1所示。
9、坐标轴标注：通常用x标注水平轴，用y标注垂直轴，此处用户可以自行设置标注内容。
基于上述对程序坐标系的描述，我们可以开始编写程序绘制坐标系了。
五、用户界面
在App Inventor中创建一个项目，命名为“绘制坐标”，并添加用户界面组件，如图4所示。
Screen1的屏幕尺寸属性设为“自动调整”（默认值为“固定大小”），Screen1中共有五个组件，即，四个水平布局组件和一个画布组件，其余组件放在不同的水平布局组件中，其中水平布局四的高度为充满，其余属性设置见图中的文字说明。
图4 绘制坐标系的用户界面设计
六、编写程序
1、全局变量
为了使用方便，设置下列3个全局变量，如图5所示。
图5 程序中的全局变量
2、有返回值过程
（1）求缩放比例
该过程有三个参数，如图5所示，其中总像素数指的是绘图区的宽（求x轴缩放比例）或高（求y轴缩放比例）。
图6 有返回值过程——缩放比例
（2）求坐标系原点
如图7所示，该过程返回的是原点在画布坐标系上的坐标。在该过程中，参数“X轴”的取值为逻辑值，当求x轴原点时，参数值设为“真”，否则设为“假”。此外，局部变量“返回值”的初始值为“假”，当最大值与最小值的符号相同（同为正或同为负）时，原点不在绘图区域中，返回值为假。同样，总像素数对应于绘图区域的宽或高。
图7 有返回值过程——原点
3、无返回值过程
（1）画坐标轴：画坐标轴时画笔颜色设为黑色，画笔线宽设为2像素（在设计视图中画布的画笔线宽已经设为1）。
图8 无返回值过程——画坐标轴
（2）画横线：代码如图9所示，其中的参数“辅间距”就是单位长度。该过程包含两个循环，第一个循环绘制细线（灰色），第二个循环绘制粗线（深灰），并标注主间距所对应的数值（忽略0）。需要注意的是，在画布上写字时，文字的x坐标在一行文字的中点，y坐标在文字的底部。
图9 无返回值过程——画横线
（3）画竖线：与画横线类似，两个循环语句分别用于绘制细线和粗线，并在画粗线的同时标注数值，代码如图10所示。
图10 无返回值过程——画竖线
（4）标注坐标轴：在x轴的右端和y轴的顶端标注文字，在原点标注“0”，代码如图11所示。
图11 无返回值过程——标注坐标轴
（5）绘制坐标系
代码如图12所示，在该过程中，依次调用上述过程，完成坐标系的绘制。注意无返回值过程的调用顺序，后绘制的图形会覆盖先绘制的图形，如黑色的、宽度为2像素的x轴会覆盖深灰色、宽度为1像素的过0点的横线。图12中调用过程“画横线”、“画竖线”的代码过长，不得不将部分代码复制粘贴到图的右上部。
图12 无返回值过程——绘制坐标系
4、事件处理程序
共有两个事件处理程序，即，屏幕初始化程序及按钮点击程序，代码如图13所示。
图13 应用中的事件处理程序
七、测试
图1展现的是一个对称的坐标系，其中坐标轴的最大值与最小值互为相反数，这里我们绘制两个原点偏离画布中心的坐标系，如图14所示。
图14 程序的测试结果
八、讨论
到目前为止，我们的程序可以绘制包含原点的坐标系，对于原点偏离到画布以外的情况还未加处理。此时如果将某个坐标轴的最大值和最小值都设为正数，那么程序会出错，如图15所示，这是由于过程“原点”（见图7）的返回值为“假（false）”，而后面的画线程序无法接受这样的参数。
图15 当某坐标轴的最大值与最小值同号时程序出错
改进的思路是在“绘制坐标系”过程里添加条件语句，即，判断两个坐标原点的值是否都为数字，代码如图16所示。在下一篇文章中，我们来具体处理原点为“假”的情况。
图16程序的改进思路