一、規劃主題
將製作簡易繪圖板(如下圖),可以自由畫圖、畫直線、設定畫筆寬度、顏色、彩度等。
二、功能設計
選擇顏色
提供多種顏色讓使用者可以自由選擇。
設定畫筆彩度
也就是色彩的純度,使用者點選上、下箭頭就可以調整畫圖線條的彩度。
設定畫筆寬度
設定畫圖線條的寬度。
自由畫圖
使用滑鼠在畫布上隨意移動,就能畫出各種圖形。
畫直線
使用滑鼠選擇起點、終點,畫出直線。
畫矩形
使用滑鼠選擇起點、終點,畫出矩形。
畫正三角形
使用滑鼠決定邊長後,畫出正三角形。
請參考上圖紅框處的各種角色,想想看,每個角色需要具備什麼功能呢?請與組員討論並嘗試設計角色,完成下圖。
簡單自由畫圖
請先載入以下二個角色[ 畫筆]、[ 小圓圈] 以及背景圖,如下圖。
我們希望角色[ 小圓圈] 隨著滑鼠指標四處移動。小圓圈就如同定位標記,可以幫助使用者了解滑鼠所在位置。
請點選角色[ 小圓圈] 加入以下程式碼(如下圖),並且立刻執行看看,應該會看到小圓圈隨著滑鼠移動。
圖層(layer)介紹
Scratch 舞台上的每個角色都佔據一層圖層,如下圖的三個角色[ 黑]、[ 藍]、[ 紅] 分別是圖層3(最下層)、圖層2、圖層1(最上層)。
舞台區顯示畫面時,會由最下方的圖層開始顯示,然後逐一往上疊放其他圖層的角色,因此最上層的圖形不會被其他角色遮住。
以上圖為例,最終顯示的結果如下圖:
例如,使用圖層移動指令將角色[ 藍] 移動到最上層,最後舞台區看到的結果如下圖所示。
首先,調整[ 畫筆] 的圖示位置,請點選畫筆圖示。
滑鼠點選到「造型」頁面,參考下圖依序點選圖示,然後用滑鼠點選[ 畫筆] 圖示中央的十字點,就可以拖拉[ 畫筆] 移動到任意位置
請將[ 畫筆] 圖示的筆尖對準造型繪圖區正中央的十字圓圈,這樣稍後在使用[ 畫筆] 時,它的筆尖與滑鼠座標會是一致的。
角色[ 畫筆] 內撰寫程式,程式使用一個無窮迴圈,跟著滑鼠游標的移動,迴圈內部不斷地將[ 畫筆] 重新定位到目前滑鼠游標位置,加上圖層移動指令以確保畫筆永遠是在最上圖層。
迴圈內同時還會不斷重複檢查是否按下滑鼠鍵。
如下圖,在操作介面紅虛線下方灰色實心區域是功能設定區,照理來說畫筆不能跑到下方做畫,因此程式中加上一個條件限制:當滑鼠座標Y 大於-110(紅虛線以上)才可顯示畫筆並下筆繪圖。
相反地,若Y 小於等於-110(紅虛線以下),就必須隱藏畫筆,代表不能在此區域作畫。這個限制程式碼如下圖紅虛線部分。
設定畫筆顏色
請建立變數「顏色」
增加三種顏色角色[ 黑]、[ 紅]、[ 藍],放置在功能設定區的適當位置
當使用者點選角色[ 紅],變數「顏色」被設定為「紅色」。
接著在主程式中設計一個無窮迴圈,不斷檢查變數「顏色」是否為紅色,若條件檢查為真,則修改畫筆顏色為紅色,程式如下圖。
使用變數傳遞資料
不同的角色若要溝通訊息,可以使用變數傳遞資料,前述做法就是角色[紅]將訊息放到變數「顏色」內(如下圖),然後主程式隨時檢查變數內容,取得訊息後執行對應的程式碼。
主程式不斷查詢變數的這種行為,又稱為輪詢(polling),優點是程式實作容易,但缺點是效率偏低,即使發送端沒有任何訊息送出,接收端還是必須使用迴圈不斷檢查變數內容,非常沒有效率。
另一種較好的方法是使用Scratch內建的廣播機制傳遞訊息,發送者使用指令「廣播訊息積木」送出訊息,另一端接收者使用事件指令的「當收到訊息積木」來接收訊息,如果有訊息產生才會觸發此事件,進而執行對應的程式碼。
優點是主程式不用一直浪費時間去檢查變數的內容,只要被動等候系統通知事件發生了,再依照變數內容改變畫筆顏色即可。
改用Scratch 內建的廣播機制傳遞訊息的程式寫法如下:
當角色[ 紅] 被點擊時,會先播放音效,接著送出廣播訊息「紅色訊息」(如下圖)。
下圖則是畫筆主程式收到「紅色訊息」,就將畫筆顏色設為紅色。
到目前為止,繪圖板已經可以選擇不同顏色,接下來若要修改畫筆的筆跡寬度,請新增變數「寬度」,並且在功能設定區加入三種筆跡寬度圖示(細、中、粗),如下圖。
請點選角色[ 細線],設定程式如下圖,會將寬度變數設為2,同時發送訊息「設定寬度」。
接著在主程式加上接收訊息「設定寬度」的處理程式,如下圖。
畫筆的彩度有十個等級,以藍色為例,下圖就是彩度設定由10、20、...100 的效果,數字越大顏色越濃。
請增加變數「彩度」以及角色[ 變淡]、[ 加深] 放置於功能設定區。
當使用者點選[ 變淡],程式調整彩度的數值(遞減10 單位),並且發出訊息「設定彩度」給主程式,再依照變數「彩度」的值修改筆跡的彩度,程式如下圖。
當收到「設定彩度」訊息時,立即調整筆跡的彩度。
四、其他功能(進階學習內容)
請加入變數「繪圖模式」並顯示在舞台區,還有四個角色:[ 自由畫]、[ 直線]、[ 矩形]、[ 正三角形],請放到功能設定區內的適當位置,如下圖所示。
其中,變數「繪圖模式」準備存放以下四種字串之一:自由畫、直線、矩形、正三角形,代表目前正在使用的繪圖模式。
當使用者點選角色[ 自由畫],就設定變數「繪圖模式」為字串「自由畫」(如下圖)。
我們可以繼續以相同的方式,加入更多的「繪圖模式」(例如直線、正三角形、矩形),方法如下:
步驟 1
建 立「繪圖模式」變數,並且在程式的一開始先設定變數初值為「自由畫」。
步驟 2
利 用條件判斷指令,依照變數「繪圖模式」的內容,決定要執行的繪圖模式。請將原本的綠框內的「自由畫程式碼」,再加上一層選擇結構判斷,當變數「繪圖模式」等於「自由畫」,才執行原本綠框內的「自由畫程式碼」。
步驟 3
其 他的繪圖模式(例如直線、正三角形、矩形),雖然還沒有寫出對應的程式,但可以先將條件判斷結構寫好(如下圖步驟3),之後再慢慢補齊程式碼。
如果使用者點選了畫直線功能,主程式該如何寫呢?
首先分析畫直線線段,步驟如下,流程圖如下圖所示:
1. 移動滑鼠到任一位置按下滑鼠鍵,決定線段起點。
2. 按住滑鼠鍵不放,同時拖曳滑鼠到線段終點。程式會在此等候使用者放開滑鼠鍵,才會繼續往下執行。
3. 放開滑鼠鍵,決定線段終點。
4. 依照起點與終點,畫出直線。
這個流程會用到四個變數存放座標值,請自行建立變數,並撰寫完整程式放到主程式的條件判斷結構裡(如下圖)。
完整的程式如下圖:
試試看
將程式碼改寫成函式
我們在八年級的時候曾經介紹過「函式」的概念,例如下圖是畫正方形函式的程式碼,當左半邊主程式執行到呼叫「正方形」函式積木時,控制權會轉移到函式「正方形」執行。
執行完畢後,會再回到原先的呼叫點的下一行程式,繼續執行下去。
本章畫直線的程式碼,很適合改寫成函式,請同學們試著自己設計「畫直線」的函式積木,並由主程式呼叫,這樣子可以降低主程式的複雜度,使得程式更容易維護。
設計「畫矩形」函式
任意一個矩形,只要知道左上角、右下角的座標,就可以畫出圖形。
假設畫矩形的動作是:移動滑鼠到適當位置,接著點擊滑鼠左鍵選定矩形的左上角座標,並且持續壓著左鍵移動滑鼠到矩形右下角才放開滑鼠,這樣就可以蒐集到左上角、右下角座標,進而畫出完整的矩形。
請設計程式,偵測使用者的動作,蒐集矩形的左上角、右下角座標,畫出正確圖形。
提示:請先分析畫矩形的步驟,參考下圖流程圖後,再寫出程式。
設計「畫正三角形」函式
如果使用者點選畫正三角形,請先分析畫正三角形的步驟,再寫出主程式。
在畫正三角形之前,要先決定邊長。請使用滑鼠沿著X軸方向畫一條水平線段當作邊長,也就是以此線段起點x軸座標(x1)減去終點x軸座標(x2)
再取絕對值作為正三角形邊長(|x1-x2|),接著畫出正三角形,請參考下方流程圖。