1.3.1程序編寫嘗試

1、學(xué)案13：AppInventor手機(jī)編程（III）制作涂鴉板2.0四位學(xué)號姓名四位學(xué)號姓名復(fù)習(xí)上節(jié)課所學(xué)內(nèi)容： 1、增加了一個畫布作為畫板； 2、利用畫布上的被劃動事件塊、調(diào)用畫線過程實現(xiàn)涂鴉； 3、調(diào)用畫布的清除畫布過程實現(xiàn)清屏； 4、利用計時器調(diào)用系統(tǒng)當(dāng)前時間作為文件名； 5、利用拼字串拼出涂鴉畫的保存路徑和文件名。 Version2.0版本要實現(xiàn)的功能：1、能自由選擇畫筆的粗細(xì)；2、利用調(diào)色板調(diào)配出畫筆的顏色。通過本節(jié)課的學(xué)習(xí)，你將掌握：1、數(shù)字滑動條的使用；2、加色模式的合成原理；3、版面構(gòu)圖的一些技巧。二、探究一：讓畫筆豐滿讓程序能夠設(shè)置畫筆筆刷的大小學(xué)習(xí)要點：數(shù)字滑動條的用法標(biāo)簽的

2、用途任務(wù)分析【關(guān)鍵點】畫布的哪個屬性是設(shè)置畫筆的筆刷大??？ 【思考】用所學(xué)的知識，嘗試讓畫筆筆刷在原來的基礎(chǔ)上增加或者減??？待解決的問題要解決問題，需要添加什么元素，如何解決加粗減細(xì)上述方法太復(fù)雜，還有沒有什么辦法？【新知】數(shù)字滑動條組件設(shè)計在線寬水平布局中，添加一個標(biāo)簽（用于顯示線寬數(shù)字）和一個數(shù)字滑動條（記錄筆刷的線寬）。組件分類組件組件名屬性屬性值用戶界面標(biāo)簽線寬值粗體打勾字號16高度充滿寬度40像素顯示文本1數(shù)字滑動條線寬滑動條寬度200像素最大值20最小值1滑塊位置1邏輯設(shè)計【觀察】邏輯設(shè)計中，滑動條組件有哪些積木塊。能用于該任務(wù)的有哪些？【請用邏輯積木塊“翻譯”以下句子】讀取滑動條

3、滑塊所在位置的數(shù)字，將其作為線寬，同時線寬值的標(biāo)簽上顯示當(dāng)前滑塊所在位置的數(shù)字?！舅伎肌?、產(chǎn)生事件塊的對象是哪個？畫布？/滑動條？ 2、畫筆線寬和線寬值的顯示文本值都是由 賦予的？【參考邏輯積木設(shè)計1】 HYPERLINK l 邏輯設(shè)計1 請點擊三、探究二：讓涂鴉的線條變得多彩調(diào)色板學(xué)習(xí)要點：利用調(diào)色板證明加法三原色的合成原理學(xué)習(xí)布局的運(yùn)用，讓屏幕設(shè)計得更加美觀整齊1、學(xué)習(xí)資料（1）【光學(xué)三原色】紅（R）綠（G）藍(lán)（B）（2） RGB之所以稱為三原色，是因為在自然界中肉眼所能看到的任何色彩都可以由這三種色彩混合疊加而成，因此也稱為加色模式。RGB模式又稱RGB色空間。它是一種色光表色模式，它

4、廣泛用于我們的生活中，如電視機(jī)、計算機(jī)顯示屏、幻燈片等都是利用光來呈色。印刷出版中常需掃描圖像，掃描儀在掃描時首先提取的就是原稿圖像上的RGB色光信息。RGB模式是一種加色法模式，通過R、G、B的輻射量，可描述出任一顏色。計算機(jī)定義顏色時R、G、 B三種成分的取值范圍是0-255，0表示沒有刺激量，255表示刺激量達(dá)最大值。R、G、B均為255時就合成了白光，R、G、B均為0時就形成了黑色，當(dāng)兩色分別疊加時將得到不同的“C、M、Y”顏色。在顯示屏上顯示顏色定義時，往往采用這種模式。圖像如用于電視、幻燈片、網(wǎng)絡(luò)、多媒體，一般使用RGB模式。（3） 紅色的RGB值為（255,0,0），綠色的RGB

5、值為（0,255,0），藍(lán)色的RGB值為（0,0,255），黑色的RGB值為（0,0,0）。紅色+綠色=黃色 綠色+藍(lán)色=青色 紅色+藍(lán)色=品紅 紅色+綠色+藍(lán)色=白色根據(jù)以上的加色原則，你可得出黃色，白色的RGB值？黃色（ , , ） 白色（ , , ）2、任務(wù)分析【關(guān)鍵點分析】序號待解決的問題解決的方法12343、組件設(shè)計(1)在數(shù)字滑動條水平布局中添加以下組件：一個按鈕命名為調(diào)色板，一個垂直布局命名為色條垂直布局。組件屬性設(shè)置如下：組件分類組件組件名屬性屬性值用戶界面按鈕調(diào)色板高度80像素寬度充滿形狀橢圓背景顏色黑色界面布局垂直布局色條垂直布局水平對齊居左：1垂直對齊居中：2素高度自動寬

6、度260像素（2）在色條垂直布局里分別添加三個數(shù)字滑動條。屬性設(shè)置如下：組件分類組件組件名屬性屬性值用戶界面數(shù)字滑動條紅滑動條左側(cè)顏色紅色高度寬度200像素最大值255最小值0滑塊位置0綠滑動條左側(cè)顏色綠色高度寬度200像素最大值255最小值0滑塊位置0藍(lán)滑動條左側(cè)顏色藍(lán)色高度寬度200像素最大值255最小值0滑塊位置04、邏輯設(shè)計【新知】利用顏色內(nèi)置塊中的合成顏色描述顏色。【思考】1、紅色的RGB值是 （ ） ；2、綠色的RGB值是 （ ）；3、藍(lán)色的RGB值是 （ ）；4、黑色的RGB值是 （ ）。A、 B、C、 D、【請用邏輯積木塊“翻譯”以下句子】當(dāng)紅滑動條滑動時，畫布中的畫筆顏色、調(diào)

7、色板的背景顏色均設(shè)置為由滑塊位置組成的顏色?！緟⒖歼壿嫹e木設(shè)計2】 HYPERLINK l 邏輯設(shè)計2 請點擊【依葫蘆畫瓢】參考紅按鈕組件的邏輯設(shè)計，分別設(shè)計綠/藍(lán)按鈕組件?！緟⒖歼壿嫹e木設(shè)計3】 HYPERLINK l 邏輯設(shè)計3 請點擊四、下集預(yù)告延伸學(xué)習(xí)【拓展任務(wù)】1、程序中暫時無法讀取R/G/B的數(shù)值，能否利用所學(xué)的知識，讓這三個數(shù)值能在屏幕上顯示出來？2、當(dāng)點擊調(diào)色板時，能讓顏色滑動條回歸到最初狀態(tài)？3、在還沒涂鴉前，清除、保存的命令都毫無意義，能否在沒有觸發(fā)涂鴉事件時，暫時將這兩個按鈕停用，等涂鴉觸發(fā)后，才讓顯示出來？4、能否通過調(diào)色板設(shè)置畫布的背景顏色？加入手機(jī)圖庫中的圖片作為背景圖片?調(diào)用手機(jī)相機(jī)，拍攝圖片作為背景圖片？5、除了畫線外，畫布還能畫什么元素？只要你敢想，就努力