04 小安爱画画【初级版】
2018-04-23 本文已影响0人
十二的小世界
一、本周目标
1、学习目标:
1)深入理解逻辑设计可视化编程
2)掌握利用绘图动画组件实现绘图功能
3)了解事件与行为,掌握事件驱动的编程,学会处理手机触屏、划屏、计时等基本事件
2、学习重点:
1)利用绘图动画组件实现绘图功能
3、学习难点:
1)处理手机触屏、划屏等基本事件
二、准备开始
1、APP功能
1)用手指在虚拟的油漆桶中蘸取绘画所需的颜色;
2)用手指在手机屏幕上画线;
3)用手指触碰手机屏幕画圆;
4)点击画布下方的按钮来擦净画布;
5)点击画布下方的按钮来改变画笔的尺寸;
6)用相机拍摄照片,并在照片上绘画。
2、小提示:注意修改名称
1)项目名称:想修改项目名称,可以点击菜单“项目→另存项目”,就可以为原有项目赋予新的名称,同时原有项目依然得以保留;
2)组件名称:一般的组件名称都可以修改,但Screen1例外,在当前版本中不能修改初始屏幕的名称;
3)屏幕标题:出现在设备的标题栏中,是屏幕的标题属性,默认值是Screen1,如第一章你好猫咪中所见到的,可以随意修改它,例如我们刚刚将它改为“油漆桶”。
三、组件设计
水平布局一:用三个颜色按钮控制画笔颜色
![](https://img.haomeiwen.com/i8231219/0c54eeee041b6e25.png)
画布【绘画动画——画布】
功能:
· 有预设好背景图
· 可在上面作画
· 可以将图片设置为用户拍摄的照片
![](https://img.haomeiwen.com/i8231219/89613b52ba5f339b.png)
水平布局二:内添加四个按钮,分别具有拍照、清除两种功能
四、逻辑设计【为我们的组件添加行为】
拖动画线【拖动事件:手指在画布上放下,手指与屏幕保持接触并移动】
这条线实际上是由无数个微小的直线(线段)构成,手指每次微小的移动,都将从手指所在的最后一个位置开始,到手指的当前位置为止,绘制一个微小的线段。
![](https://img.haomeiwen.com/i8231219/a3e953d31f984598.png)
![](https://img.haomeiwen.com/i8231219/f96d81853f2c6f28.png)
实现按钮功能
需要实现两组按钮,三种功能:调色、拍照、清除
选择按钮对应的事件——选择被操作的对象——实现功能
![](https://img.haomeiwen.com/i8231219/8fabf0d8847c95ca.png)
五、小结
今天学习了新的组件——画板,画板还有一些没有用到的功能,可以尝试探索一下。
六、作业
1、完成小安爱画画初级版的设计,并安装体验。
2、尝试添加新的功能,比如调整画笔粗细等。