从头开始学App Inventor（三）——绘图板

牟晓东

这期我们用App Inventor制作一个绘图板APP，用户可以画画，有设置画笔粗细和颜色，可以导入图片和自己拍摄的照片作为背景，画完后可以保存图片。通过这个APP，我们可以掌握画布组件、照相机组件的基本功能，了解RGB颜色的原理，理解触摸和拖拽事件，并掌握借助计时器组件实现文件名唯一性的小技巧。

我们要去图库网站收集保存、拍照、文件夹、橡皮、铅笔等图标，新建项目，将图标上传到素材中。

Screen1屏幕组件：在屏幕中放入垂直布局，在垂直布局中放入画布组件和水平布局。

在水平布局中依次放入“图像选择组件（打开）、空白标签、按钮（相机）、空白标签、按钮（保存）、空白标签、按钮（橡皮）、按钮（红笔）、文本输入框R、按钮（绿笔）、文本输入框G、按钮（蓝笔）、文本输入框B、按钮（OK）、标签（粗细）、滑动条（最大值50，最小值1）”。并为它们重命名。

放入两个隐藏组件：照相机、计时器（图1）。

各组件的详细属性如下表。

在屏幕设计中为了防止组件之间紧贴在一起，在两个按钮之间加入一个标签，标签的文本为空，这样的标签就起到了空格的作用（图2）。

完成组件设计后，先别急着逻辑设计，最好先在手机中实测调试，并根据实际情况调整组件设计。

当手指在画布上轻触会画下一个实心圆点。用“当画布被触碰”事件，用“画圆”的方法实现此功能。

画圆方法有4个参数槽，通过确定圆心的坐标和圆的半径，确定圆点的大小和位置，“启用填充”只能连接逻辑值“真”或“假”，默认为“真”表示实心圆（图3）。

计算机用坐标和像素单位來确定屏幕位置，在App Inventor中屏幕左上角的坐标是（x=0，y=0），往右x值不断增加，往下y值不断增大。这与我们习惯的Scratch的坐标原点位置不同（图4、图5）。

下面我们来实现手指拖动画线的功能，响应“被拖动”事件。画布“被拖动”事件处理器中可传入7个参数。包括起点坐标、前点坐标、当前坐标和任意被拖拽的精灵。

起点坐标和当前坐标好理解，连接这两个点就能画出一条长直线。

前点坐标是指上个采样时间点手机采集到的手指触摸画布的位置，由于采样间隔很短，连接前点坐标和当前坐标两个点就能画出很短的直线，手指拖动画出的实际线条就是曲线了。

任意被拖拽的精灵是一个逻辑值，表示是否拖动了精灵。

在手机上画画，最自然的方式莫过于直接用手指在手机屏幕上拖屏而画。这需要在手指划过的每一点上都留下过往的痕迹。从人的感知中，手指在屏幕上划拖动过程是一个连续的过程。 但计算机处理时实际上是将这个连续的过程分解为密集的离散采样点，就像线段是由点构成的，只要采样的频率够高、点够密集，那么这些离散点看起来就像连续的线条（图6）。

现在连上手机，测试一下画线和画点功能是否正常吧。

刚才我们画出的线条都是黑色的，下面以红色画笔为例，当红色按钮被点击时，画笔颜色改为红色（图7）。

通过RGB（红、绿、蓝）三基色可以调出个性化的色彩。三基色的数值由文本（0-255）输入框输入，点击按钮确定，则合成颜色，并设置画笔颜色（图8）。

用滑动条设置线宽，通过设置滑动条的属性限制线宽的范围（图9）。

点击“图像选择框”，可以打开手机相册或文件夹，选择图片可以作为画布背景用于涂鸦。注意是“选中项”而非“图像”，“图像”指的是我们上传的文件夹图标（图10）。

点击拍照图标，调用相机，当拍照完成时，将照片设置为画布背景（图11）。

当点击清除按钮时，直接调用清除画布。直接调用画布组件提供的“清除画布”方法即可（图12）。

完成作品后，需要保存为图像文件。画布组件提供了两种图像保存方法：不指定文件名的“保存”，以及由开发者确定文件名的“另存”。这两个方法模块不能直接拼入按钮的被点击事件处理器中。这里需要借助控制模块中的“求值但忽视结果”转接模块作为桥梁，才能拼接上。因为这两种方法保存后都有一个返回值，而我们不需要这个返回值，所以用“求值但忽视结果”。

如果调用“保存”方法，开发者不能指定保存的图像文件名，系统会给它自动命名。文件名的命名规则由“前缀app_ inventor_ +系统当前时间值”构成，存放的位置是SD卡中的“storage/emulated/0/Android/data/edu.mit.appinventor.aicompaion3/”目录，这个文件名很难区分不同APP保存的图像（图13）。

如果调用“另存”方法，则保存的图像文件名将是开发者在参数槽中设置的文件名。但由于文件名是在开发阶段已经确定，因此后面保存的图像文件也会是同一个，会覆盖前面保存的文件（图14）。

为了解决“另存”文件名一样导致覆盖之前作品的问题，我们用计时器辅助生成不重复且好记的文件名（图15）。

图像在手机中的保存地址很复杂，如果你需要详细地址，可以用对话框显示出来（图16）。

由于新版安卓安全權限方面的提升，老版的App Inventor可能会遇到某些手机照相机拍照无法获取照片的问题，这可以用打开图片文件的方法绕过去，也可以使用第三方升级扩展包。

保存作品我们不知道放在了哪个文件夹，修改一下程序，保存时调用“画布绘制文本”，让文件路径显示在画布上（图17）。