您的位置: 主页>机器人编程>ROBOLAB编程>数与图(1)
加盟酷吧机器人 培养孩子核心能力

数与图(1)

App Inventor的画布组件,相当于一个平面直角坐标系,画布上的任何一点都可以用一对坐标(x,y)加以描述,而画布具有画笔的功能,可以在指定位置绘制点、线、圆等基本图形,这就使得开发者可以用程序在画布上绘图,如果配合上计时器,还可以在二维时空中表现动画效果。

本系列文章将结合中学的数学及物理知识,利用画布和计时器组件的时空定位功能,展现程序的魅力。

首先要了解的是画布的空间定位功能,为此我们将利用程序绘制一个数学中的平面直角坐标系,结果如图1所示。本文的目的就是绘制这样的坐标系。

数与图(1)

图1 用程序绘制的平面直角坐标系

一、数学中直角坐标系的基本要素

初中数学中学过数轴,它是一根直线,有三个基本要素:原点、正方向及单位长度。在平面直角坐标系中,这样的数轴有两根,即,沿水平方向x轴,以及沿垂直方向的y轴,数轴的基本要素也同样适用于平面直角坐标系。

1、原点:x轴与y轴相互垂直,且原点重合,在绘制坐标系时,通常将原点画在坐标系的中心;

2、正方向:x轴的正方向指向右方,y轴的正方向指向上方;

3、单位长度:两个刻度之间的距离。数学课本中的x、y轴的单位长度是相同的,如图2中所示的坐标纸。但在描述现实问题时,两个轴所代表的物理量有可能存在数量级的差别,因此,两个轴会采用不同的单位长度,如图1中所示的坐标系。

4、角度:x轴正向为0度角,逆时针为角度增加的方向。

数与图(1)

图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度,与数学中的直角坐标系不同的是,角度沿顺时针方向增大。

数与图(1)

图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中共有五个组件,即,四个水平布局组件和一个画布组件,其余组件放在不同的水平布局组件中,其中水平布局四的高度为充满,其余属性设置见图中的文字说明。

数与图(1)

图4 绘制坐标系的用户界面设计

六、编写程序 1、全局变量

为了使用方便,设置下列3个全局变量,如图5所示。

数与图(1)

图5 程序中的全局变量

2、有返回值过程

(1)求缩放比例

该过程有三个参数,如图5所示,其中总像素数指的是绘图区的宽(求x轴缩放比例)或高(求y轴缩放比例)。

数与图(1)

图6 有返回值过程——缩放比例

(2)求坐标系原点

如图7所示,该过程返回的是原点在画布坐标系上的坐标。在该过程中,参数“X轴”的取值为逻辑值,当求x轴原点时,参数值设为“真”,否则设为“假”。此外,局部变量“返回值”的初始值为“假”,当最大值与最小值的符号相同(同为正或同为负)时,原点不在绘图区域中,返回值为假。同样,总像素数对应于绘图区域的宽或高。

数与图(1)

图7 有返回值过程——原点

3、无返回值过程

(1)画坐标轴:画坐标轴时画笔颜色设为黑色,画笔线宽设为2像素(在设计视图中画布的画笔线宽已经设为1)。

数与图(1)

图8 无返回值过程——画坐标轴

(2)画横线:代码如图9所示,其中的参数“辅间距”就是单位长度。该过程包含两个循环,第一个循环绘制细线(灰色),第二个循环绘制粗线(深灰),并标注主间距所对应的数值(忽略0)。需要注意的是,在画布上写字时,文字的x坐标在一行文字的中点,y坐标在文字的底部。

数与图(1)

图9 无返回值过程——画横线

(3)画竖线:与画横线类似,两个循环语句分别用于绘制细线和粗线,并在画粗线的同时标注数值,代码如图10所示。

数与图(1)

图10 无返回值过程——画竖线

(4)标注坐标轴:在x轴的右端和y轴的顶端标注文字,在原点标注“0”,代码如图11所示。

数与图(1)

图11 无返回值过程——标注坐标轴

(5)绘制坐标系

代码如图12所示,在该过程中,依次调用上述过程,完成坐标系的绘制。注意无返回值过程的调用顺序,后绘制的图形会覆盖先绘制的图形,如黑色的、宽度为2像素的x轴会覆盖深灰色、宽度为1像素的过0点的横线。图12中调用过程“画横线”、“画竖线”的代码过长,不得不将部分代码复制粘贴到图的右上部。

数与图(1)

图12 无返回值过程——绘制坐标系

4、事件处理程序

共有两个事件处理程序,即,屏幕初始化程序及按钮点击程序,代码如图13所示。

数与图(1)

图13 应用中的事件处理程序

七、测试

图1展现的是一个对称的坐标系,其中坐标轴的最大值与最小值互为相反数,这里我们绘制两个原点偏离画布中心的坐标系,如图14所示。

数与图(1)

图14 程序的测试结果

八、讨论

到目前为止,我们的程序可以绘制包含原点的坐标系,对于原点偏离到画布以外的情况还未加处理。此时如果将某个坐标轴的最大值和最小值都设为正数,那么程序会出错,如图15所示,这是由于过程“原点”(见图7)的返回值为“假(false)”,而后面的画线程序无法接受这样的参数。

数与图(1)

图15 当某坐标轴的最大值与最小值同号时程序出错

改进的思路是在“绘制坐标系”过程里添加条件语句,即,判断两个坐标原点的值是否都为数字,代码如图16所示。在下一篇文章中,我们来具体处理原点为“假”的情况。

数与图(1)

图16程序的改进思路

后记,小编朋友公司研发了一个游戏化的少儿编程在线课程(5-12岁),游戏化教学结合scratch(一款在线少儿编程工具,类似乐高的积木拼搭),我家娃娃学了几次课,非常喜欢(超预期),16次课才200多块钱,对锻炼孩子的思维能力和动手动力很有帮助。

欧美思机器人教育加盟 赚钱好项目
上一篇:【源码】基于Arduino的气象站气象资料分析
下一篇:⊱Abilix丨在这个全民STEAM的时代,你能分辨真假
您可能喜欢
回到顶部