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程序的改进思路

--end--

声明：本文章由网友投稿作为教育分享用途，如有侵权原作者可通过邮件及时和我们联系删除：freemanzk@qq.com