少儿手机编程培训:手机能当画板用啦!随时随地展示你的灵魂画作!

小童老师之前已经带大家用App Inventor做过“钢琴”、“计算器”、“烧脑小游戏”、“指南针”等等多种多样的小应用啦,但是有的爸爸妈妈说我们家宝宝特别爱画画,能不能在手机上画画呢?当然能!今天,小童老师就教大家做一个小画板应用。

为了让爸爸妈妈和宝宝更加了解今天的案例,我们先来了解一下它的功能。爸爸妈妈和宝宝有没有在微信里玩过最近很火的“画画猜猜”小游戏呢?没玩过也没关系,我们来看一下它的界面是什么样子的。

今天呢,我们就做一个类似的应用出来,因为我们的篇幅问题,我们只做中间的画板部分。来吧,爸爸妈妈快点叫上宝宝打开我们的APP Inventor一起做起来~

第一步:界面设计

首先我们先来看看这次制作的目标界面:

我们的画板界面是不是看起来比较简单?我们把界面分为三部分。

标题栏:最上边的一栏。由两个标签和一个刷新题目的按钮组成,对应的组件列表是:

画板栏:中间的空白部分,就是一个画布。

画笔功能栏:最下边的两行,这部分由各种较为复杂的布局及按钮组成,但只要有耐心做起来就不困难,小朋友来试试吧,下面是对应的组件列表:

第一行的布局

第二行的布局

大家看到图中小童老师把所有的垂直布局的内容收起来了,收起来的部分是我们的布局的重点。我们来看看这部分是什么吧!

粗细按钮和颜色按钮下边的横线是为了表示当前选中的画笔颜色,和画笔的线宽。非选中状态的按钮该横线均为隐藏状态。

注意:表示粗细的按钮把属性中的“形状”设置为“椭圆”,四个按钮的宽高像素分别设置为:(5,5)、(10,10)、(15,15)、(20、20),就可以得到界面中的效果了!

第二步:代码设计

(1)随机出题:我们的案例可以随机给出一个题目,我们需要在画板里画出给出的题目。我们在打开应用或者点击刷新按钮的时候。必须要清除画布,随机给出列表中的一个题目。代码如下:

(2)设置画笔的粗细:我们更换画笔的粗细时为了把之前的选中标签隐藏起来设计一个过程,把所有选中标签的显示状态设置为假,然后再把当前点击的按钮对应的选中标签的设置为允许显示。四个按钮对应的画笔的粗细分别为:2.5、5、7.5、10。

(3)挑选画笔颜色:画笔颜色按钮对应的选中效果的方法和上一步讲的画笔粗细的方法一样,当某种颜色的按钮点击后,画笔颜色设置为按钮的颜色,画笔粗细按钮的颜色也变为对应的颜色。由于颜色按钮较多,这里不一一给出它们的代码,通过下图的代码块大家可以看出,所有按钮的点击事件的代码除了更换颜色外,都是一样的。小朋友可以自行拖拽出其他按钮的代码块!

(4)画板画图:在画板上画图主要分为两种情况,一种是只触摸一下画板,另一种是在画板上画线,下边两个代码块分别对应了这两种情况。

(5)橡皮擦和清除画板内容:橡皮擦的原理主要是像我们平时用的涂改液一样,用和画布一样的白色画笔来覆盖之前所画的内容;清除按钮的代码十分简单,不多做解释啦。

到这里我们的小画板就做完了,小朋友赶紧把它运行到手机上玩一下吧,下面是小童老师和伟伟老师画的彩虹,分享给大家,大家快来猜猜哪个是小童老师画的?

哼!我才不告诉你们右边那个超级丑的是小童老师画的呢!爸爸妈妈和宝宝都来展示一下自己的画,比比谁画的更好吧!

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2018年1月28日
下一篇 2018年1月28日

相关推荐