Embedded Files
一、規劃主題
將製作簡易繪圖板（如下圖），可以自由畫圖、畫直線、設定畫筆寬度、顏色、彩度等。
二、功能設計
選擇顏色
提供多種顏色讓使用者可以自由選擇。
設定畫筆彩度
也就是色彩的純度，使用者點選上、下箭頭就可以調整畫圖線條的彩度。
設定畫筆寬度
設定畫圖線條的寬度。
自由畫圖
使用滑鼠在畫布上隨意移動，就能畫出各種圖形。
畫直線
使用滑鼠選擇起點、終點，畫出直線。
畫矩形
使用滑鼠選擇起點、終點，畫出矩形。
畫正三角形
使用滑鼠決定邊長後，畫出正三角形。
請參考上圖紅框處的各種角色，想想看，每個角色需要具備什麼功能呢？請與組員討論並嘗試設計角色，完成下圖。
簡單自由畫圖
請先載入以下二個角色[ 畫筆]、[ 小圓圈] 以及背景圖，如下圖。
我們希望角色[ 小圓圈] 隨著滑鼠指標四處移動。小圓圈就如同定位標記，可以幫助使用者了解滑鼠所在位置。
請點選角色[ 小圓圈] 加入以下程式碼（如下圖），並且立刻執行看看，應該會看到小圓圈隨著滑鼠移動。
圖層（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|），接著畫出正三角形，請參考下方流程圖。
Page updated
Report abuse