小学生系列之二：涂鸦板
一、功能描述
在画布上绘制图画；
设置画笔的粗细及颜色；
拍一张照片，并显示在屏幕上，在照片上涂鸦。
清除图画。
二、界面设计
如图 1所示，这一次我们添加完组件后，要为组件改名，改为有意义的名字。组件的命名及属性设置见下表。
图 1涂鸦板项目的设计视图
三、组件清单及属性设置
|
组件类型 |
命名 |
属性 |
属性值 |
|
屏幕 |
Screen1 |
标题 |
涂鸦板 |
|
水平对齐 |
居中 |
||
|
画布 |
画布1 |
宽度、高度 |
充满 |
|
水平布局 |
水平布局1 |
宽度 |
充满 |
|
数字滑动条 |
数字滑动条1 |
宽度 |
充满 |
|
最大值 |
30 |
||
|
最小值 |
1 |
||
|
滑块位置 |
2 |
||
|
按钮 |
红色、绿色、蓝色 |
显示文本 |
空 |
|
背景颜色 |
红绿蓝 |
||
|
宽度、高度 |
充满 |
||
|
拍照 |
显示文本 |
拍照 |
|
|
擦除 |
显示文本 |
擦除 |
|
|
照相机 |
照相机1 |
无 |
-- |
四、认识代码块
1、画布的拖动事件
当用户手指在画布上连续拖动时，会触发画布的拖动事件。如图 2所示，事件代码块中保存着7个值，它们的含义也标注在图中。
图 2画布拖动事件处理程序
讲解要点：
理解坐标：如图 3所示，画布坐标系原点位于画布左上角，水平方向向右为正，垂直方向向下为正，这与数学中标准的平面直角坐标系有差别。
所谓画线，并非绘制一条完整的曲线，而是将一个个微小的线段连缀起来；当画笔的宽度足够大时，可以看出曲线的转弯处留有空白。
这个事件中带有7个值：起点x、y坐标、邻点x、y坐标、当前x、y坐标及拖到精灵，在实践处理程序中，可以取得这些值，可以将它们理解为局部变量，这些值在事件处理程序之外无效。
图 3理解画布坐标系
2、事件的唯一性
如图 4所示，为了提高编写代码效率，我们复制了红色按钮的点击事件处理程序，图中事件块左上角出现了警告标记，说明这样的代码是非法的。在项目中，一个按钮组件只能有一个点击事件处理程序，其他组件的事件处理程序亦然。
图 4一个按钮组件只允许有一个点击事件处理程序
3、相机拍照功能
图5中代码块的作用是打开手机中已有的拍照应用，我们自己创建的应用并不具备拍照功能。
图 5照相机组件的拍照功能
4、照相机的拍照完成事件
图6中的事件块中同样携带了一个值——图片地址，它对应于照片存放在手机中的文件路径。从这里得知，App Inventor的应用可以访问手机中的文件，只需给出路径即可，不过App Inventor只能处理文本文件。
图 6携带了照片地址的拍摄完成事件块
5、滑块位置改变事件
如图 7所示，这又是一个携带了值的事件处理程序，滑块位置介于最小值与最大值之间，是一个比例值。这个值有可能是小数。
图 7数字滑动条的滑块位置改变事件
五、操作技巧
1、复制代码
如图 8所示，在代码块上点击右键，会弹出快捷菜单，其中第一个选项就是复制代码块，你可以尝试其他选项的功能。
图 8复制代码的操作方法
2、发现更多颜色
如图 9所示，点击颜色块，可以打开一个调色板，其中有更多的颜色可供选择。
图 9点击颜色块可以发现更多的颜色
六、课堂提问：
对于小学生来说，如何理解平面直接坐标系？你有哪些好的比喻，让学生理解这件事：确定平面上一点的位置需要两个值。
七、课堂练习：
利用加速度传感器来清除画布。
八、课后作业
1、尝试添加更多的颜色按钮；
2、上传一张图片，并设为画布的背景图片。
附：全部代码
图10涂鸦板项目的全部代码