1.3.1程序编写尝试.docx

学案13：AppInventor手机编程（III）制作涂鸦板2.0四位学号姓名四位学号姓名复习上节课所学内容： 1、增加了一个画布作为画板； 2、利用画布上的被划动事件块、调用画线过程实现涂鸦； 3、调用画布的清除画布过程实现清屏； 4、利用计时器调用系统当前时间作为文件名； 5、利用拼字串拼出涂鸦画的保存路径和文件名。 Version2.0版本要实现的功能：1、能自由选择画笔的粗细；2、利用调色板调配出画笔的颜色。通过本节课的学习，你将掌握：1、数字滑动条的使用；2、加色模式的合成原理；3、版面构图的一些技巧。二、探究一：让画笔丰满让程序能够设置画笔笔刷的大小学习要点： 数字滑动条的用法 标签的用途1、 任务分析【关键点】画布的哪个属性是设置画笔的笔刷大小？ 【思考】用所学的知识，尝试让画笔笔刷在原来的基础上增加或者减小？待解决的问题要解决问题，需要添加什么元素，如何解决加粗减细上述方法太复杂，还有没有什么办法？【新知】数字滑动条2、 组件设计在线宽水平布局中，添加一个标签（用于显示线宽数字）和一个数字滑动条（记录笔刷的线宽）。组件分类组件组件名属性属性值用户界面标签线宽值粗体打勾字号16高度充满宽度40像素显示文本1数字滑动条线宽滑动条宽度200像素最大值20最小值1滑块位置13、 逻辑设计【观察】逻辑设计中，滑动条组件有哪些积木块。能用于该任务的有哪些？【请用逻辑积木块“翻译”以下句子】读取滑动条滑块所在位置的数字，将其作为线宽，同时线宽值的标签上显示当前滑块所在位置的数字。【思考】1、产生事件块的对象是哪个？画布？/滑动条？ 2、画笔线宽和线宽值的显示文本值都是由 赋予的？【参考逻辑积木设计1】请点击三、探究二：让涂鸦的线条变得多彩调色板学习要点： 利用调色板证明加法三原色的合成原理 学习布局的运用，让屏幕设计得更加美观整齐1、学习资料（1）【光学三原色】红（R）绿（G）蓝（B）（2） RGB之所以称为三原色，是因为在自然界中肉眼所能看到的任何色彩都可以由这三种色彩混合叠加而成，因此也称为加色模式。RGB模式又称RGB色空间。它是一种色光表色模式，它广泛用于我们的生活中，如电视机、计算机显示屏、幻灯片等都是利用光来呈色。印刷出版中常需扫描图像，扫描仪在扫描时首先提取的就是原稿图像上的RGB色光信息。RGB模式是一种加色法模式，通过R、G、B的辐射量，可描述出任一颜色。计算机定义颜色时R、G、 B三种成分的取值范围是0-255，0表示没有刺激量，255表示刺激量达最大值。R、G、B均为255时就合成了白光，R、G、B均为0时就形成了黑色，当两色分别叠加时将得到不同的“C、M、Y”颜色。在显示屏上显示颜色定义时，往往采用这种模式。图像如用于电视、幻灯片、网络、多媒体，一般使用RGB模式。（3） 红色的RGB值为（255,0,0），绿色的RGB值为（0,255,0），蓝色的RGB值为（0,0,255），黑色的RGB值为（0,0,0）。红色+绿色=黄色 绿色+蓝色=青色 红色+蓝色=品红 红色+绿色+蓝色=白色根据以上的加色原则，你可得出黄色，白色的RGB值？黄色（ , , ） 白色（ , , ）2、任务分析【关键点分析】序号待解决的问题解决的方法12343、组件设计(1)在数字滑动条水平布局中添加以下组件：一个按钮命名为调色板，一个垂直布局命名为色条垂直布局。组件属性设置如下：组件分类组件组件名属性属性值用户界面按钮调色板高度80像素宽度充满形状椭圆背景颜色黑色界面布局垂直布局色条垂直布局水平对齐居左：1垂直对齐居中：2素高度自动宽度260像素（2）在色条垂直布局里分别添加三个数字滑动条。属性设置如下：组件分类组件组件名属性属性值用户界面数字滑动条红滑动条左侧颜色红色高度宽度200像素最大值255最小值0滑块位置0绿滑动条左侧颜色绿色高度宽度200像素最大值255最小值0滑块位置0蓝滑动条左侧颜色蓝色高度宽度200像素最大值255最小值0滑块位置04、逻辑设计【新知】利用颜色内置块中的合成颜色描述颜色。【思考】1、红色的RGB值是 （ ） ；2、绿色的RGB值是 （ ）；3、蓝色的RGB值是 （ ）；4、黑色的RGB值是 （ ）。A、 B、C、 D、【请用逻辑积木块“翻译”以下句子】当红滑动条滑动时，画布中的画笔颜色、调色板的背景颜色均设置为由滑块位置组成的颜色。【参考逻辑积木设计2】请点击【依葫芦画瓢】参考红按钮组件的逻辑设计，分别设计绿/蓝按钮组件。【参考逻辑积木设计3】请点击四、下集预告延伸学习【拓展任务】1、程序中暂时无法读取R/G/B的数值，能否利用所学的知识，让这三个数值能在屏幕上显示出来？2、当点击调色板时，能让颜色滑动条回归到最初状态？3、在还没涂鸦前，清除、保存的命令都毫无意义，能否在没有触发涂鸦事件时，暂时将这两个按钮停用，等涂鸦触发后，才让显示出来？4、能否通过调色板设置画布的背景颜色？加入手机图