师：同学们，今天我们一起来学习初二广州版信息技术第三章第三节创意涂鸦。先来了解本课学习目标：一是了解水平布局画布的设置；二是学会设置画布的背景图片；三是学会调用画布的划线方法；四是学会保存涂鸦的照片。
学校每年都会举办科创节，今年毛青同学设计了一款校园景点打卡APP，我们一起来看看。
毛青，你在做什么呢？
生：校庆到了，我在线上做了一个校园景点打卡的应用，可以在这里拍照，在校园景点打卡和签名。
师：哇，感觉好厉害。你刚才在哪里打卡了？我听说这个APP有涂鸦和智能新功能，能给我看看你涂鸦的照片吗？
生：可以。
师：毛青同学用自己设计的APP在校园各个景点打卡，那这个APP是怎样制作出来的呢？请同学们思考，在这个APP中，人的行为是什么，手机的反应又是什么？我们观察到，在这个APP中，点击打开图片，能打开手机中的图片；选择照片后，手机能显示选中的照片；手指在图片上拖动，手机能划线；点击保存，手机能保存涂鸦的图片。那要实现这些功能需要哪些组件呢？打开并显示图片需要图片选择框，画布划线功能需要画布，保存涂鸦的图片需要按钮和画布。下面请同学们观看视频，进行组件界面设计。
新建项目，按以下步骤新建项目painting：在窗口左上部单击项目，选择新建项目，在新建项目窗口中输入项目名称，单击确定。
组件界面设计，按以下步骤对paint应用进行组件界面设计：单击组件面板的组件布局，拖动水平布局到默认屏幕screen1中；单击组件面板的绘图动画，拖动画布到水平布局1中，在属性面板中单击宽度，设置为320像素，单击确定，再单击高度，设置为320像素，单击确定；单击组件面板的组件布局，拖动水平布局到屏幕中；单击组件面板的多媒体，拖动图片选择框到水平布局2中，在组件列表中单击重命名按钮，在弹出的重命名组件对话框中将图片选择框1改成打开，单击确定，在属性面板中将显示文本更改为打开图片；单击组件面板的用户界面，拖动按钮到水平布局2中，在组件列表中单击重命名按钮，在弹出的重命名组件对话框中将按钮1改成保存，单击确定，在属性面板中将显示文本更改为保存。这样就完成了对paint应用的组件界面设计。
通过以上视频，我们学习了组件界面设计的全过程，下面通过表格来总结各组件属性的设置。水平布局属于组件布局组，作用是横向排列图片选择框和保存按钮；画布属于绘图动画组，作用是显示图片并对图片进行修改，宽度和高度可设置为320像素，同学们也可结合作品需求灵活设置；图片选择框属于多媒体组，作用是打开手机中的图片。同学们，你们的组件设计都完成了吗？有没有遇到什么问题？
生：老师，为什么我的保存按钮放不进去水平布局里面呢？
师：林飞同学遇到的问题是保存按钮放不进去水平布局里面，有没有完成的同学能帮忙解答？
生：可以把水平布局的宽度设置为充满，然后选中按钮在四周移动，直到蓝线定位到自己想要放的位置，再松开鼠标。
师：谢谢宇阳同学分享的小技巧。除了水平布局，还有表格布局、垂直布局。水平布局实现内部组件自左向右的水平排列，表格布局实现内部组件按照表格方式排列，垂直布局实现内部组件自上而下的垂直排列。水平布局、垂直布局和表格布局可相互嵌套，组合出多种布局效果。要想APP界面美观，同学们需要灵活运用这些布局。组件界面设计完成了，下面我们一起跟着视频进行编程设计的学习。
编程设计，按以下步骤对paint应用进行编程设计：在代码块的screen1中单击打开，在右侧选择“当打开完成选择时”事件；在代码块的screen1中单击画布1，在右侧选择“设画布1的背景图片为”，拖动“设画布1的背景图片为”，将其拼接到“当打开完成选择时”事件中；在代码块的screen1中单击打开，在右侧选择“打开的选中项”，拖动“打开的选中项”，将其拼接到“设画布1的背景图片为”后面；在代码块的screen1中单击画布1，在右侧选择“当画布1被拖动时”；在代码块的screen1中单击画布1，在右侧选择“让画布1划线”，拖动“让画布1划线”，将其拼接到“当画布1被拖动时”事件中；在“当画布1被拖动时”事件中，鼠标移到零点x坐标变量上，拖动零点x坐标，将其拼接到参数第一点x坐标后面，用同样的方法将零点y坐标变量、当前x坐标变量、当前y坐标变量分别拼接到参数第一点y坐标、参数第二点x坐标、参数第二点y坐标后面；在代码块的screen1中单击保存，在右侧选择“当保存被点击时”；在代码块的screen1中单击画布1，在右侧选择“设画布1的背景图片为”，拖动“设画布1的背景图片为”，将其拼接到“当保存被点击时”事件中；在代码块的screen1中单击画布1，在右侧选择“让画布1另存”，拖动“让画布1另存”，将其拼接到“设画布1的背景图片为”后面；在代码块的内置块中单击文本，在右侧选择空字符串，拖动空字符串，将其拼接到“让画布1另存”后面，在字符串中输入图片库路径，这样就完成了对paint应用的编程设计。
在以上视频中，这三段代码分别实现了打开图片、划线和保存功能。第一段代码实现打开系统相册，选取图片素材，当图片选择框完全选择时，执行设画布1的背景图片为图片选择框的选中项；第二段代码实现画布的涂鸦功能，当画布1被拖动时执行，让画布1划线，第一点x坐标为0点x坐标，第一点y坐标为0点y坐标，第二点x坐标为当前x坐标，第二点y坐标为当前y坐标。这里要注意画布的坐标轴和数学的坐标轴不同，画布y轴正方向是向下的，从划线的参数可知，划线是从第一点画到第二点，随着手指拖动，零点和当前点不断变化，因此能形成线条；第三段代码实现画布的保存功能，当保存按钮被点击时，执行设画布1的背景图片为调用，让画布1另存，将图片保存到安卓系统图片的默认存储位置，文件名命名为1.jpg。