App Inventor 安卓手机应用开发简易入门4-1

第四章 绘图高手

这一章，我们主要学习canvas 的绘图功能，深入了解canvas 的绘图，包括绘制基本图形，从定值图形，到可控图形，再到自定义图形。与其他章节不同，整整一章，都是基于canvas 绘图的研究。目的是让学生对canvas 的各种函数和参数有一个更加清晰的掌握。

第1节基本图形界面——HappyPaint_V0

本节概要：

本章将通过HappyPaint 的课例，介绍组件 canvas 的绘图功能，在后续中会对界面进行一定的强化，尤其是绘图上功能强化。本节要求先掌握界面设计部分和基本图形圆的绘制，后面的课程内容会在此基础上开展。

学习要点

● 掌握界面布局

● 掌握canvas 画圆函数和清屏函数

● 颜色取值，并应用到相应的canvas 画笔属性

认识新模块

表3-2-1

实例探究： HappyPaint

图4-1-1： 初始界面1

图4-1-2：画圆界面2

图4-1-3：清屏界面3

界面设计与组件构成：

图4-1-4 UI界面

组件的拖放和设置

图4-1-5所示：界面主要涉及到的是canvas组件、 Ball组件的拖曳。

组件清单：1个canvas，1个ball组件，2个水平布局组件，5个按钮，界

Block 块编程拼接搭建

画圆坐标系：左上角点为 （0，0点） 课例要求：

1. 点击按钮能在canvas 上画圆

2. 在选择相应颜色后，画出的圆颜色发生改变

3. 清屏按钮可以清屏

○

1点击按钮画圆 画圆要用的函数

图4-1-7

参数x,y,r 分别代表（画圆函数的圆所在的 圆心【x ，y 】和半径r ）

知道了可以使用这个函数，那么我们如何利用好这个函数呢， 利用Ball 组件的【x,y 】值，半径给定一个值，这样就可以进入画圆操作了。

图4-1-8

默认是黑色的，那么我们给它换个颜色吧，应该设置canvas 的什么属性呢？

答案是：PaintColor

图组：4-1-9改变颜色之后的效果

Tip:模块的复制 右键 duplicate 就可以，再修改相应的对象，特别适用于方法一样，对象同一类型的。

○2让Ball组件移动

还记得我们上节课的小鼹鼠吗，让鼹鼠移动的关键函数是 MoveTo模块。同样Ball也是有的。

图4-1-10

那么小球移动的规律是什么？

●点击屏幕中canvas，移动到当前的位置

●拖拽小球让小球停到拖到位置

图4-1-11

○3清屏操作

Canvas带有清屏函数Clear，所以结合按钮事件，简单调用即可。

图4-1-12

完整模块：

代码解读：

本案例主要涉及到了canvas的画圆函数DrawCircle。

简单数学的公式，用到了数学的随机函数random，针对图片精灵的移动，使用到了小球的moveto模块。

测试：

项目的保存和导出

保存: Project ->Save Project

导出: Project ->My Project -> export selected project (aia) to my

computer

默认下载目录:我的电脑——我的文档——Download 目录

思维拓展任务

本案例只是绘制圆的基本功能，画出的圆大小固定，那么如何绘制一个大小不一样的圆?

任务1：完善课例，美化界面。

进阶任务2：试试在app里添加更多的功能，绘制矩形等图形。

本节结束

下章节预告：

下一章节我们和直线有个约会。