2014年2月6日 星期四

App Inventor 2 的範例程式 -PaintPot(1)

PaintPot 是 App Inventor 中基礎的繪圖程式範例,我們將利用這個範例來練習設計在APP中使用三種顏色來繪圖的程式。

原始範例:PaintPot from  MIT


需求元件:

貓咪(按滑鼠右鍵另存影像連結)

開發步驟


步驟一:請先新增一個名稱為「PaintPot」的專案,按下 OK 後,即可進入 App Inventor Designer 視窗。(註:專案名稱中可用底線但不能有空格或其它特殊字元)


















步驟二:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,接著請到右邊的屬性(Properties)面板上,找到 Text 屬性,將方框中預設的文字改為紅色(可以為中文)




















步驟三:重複步驟二,放入總共三個按鈕(Button),分別在Text 屬性中改為藍色和綠色,再來到右邊的屬性(Properties)面板上找到背景顏色(BackgroundColor),分別改變三個按鈕的顏色。





















步驟四:接著到右邊的元件庫(Components)先點Button1一下,在點下面的重新命名(Rename)將它的名字改為ButtonRed。
(此動作重複三次,將Button2改為ButtonBlue,將Button3改為ButtonGreen。)



驟五:請在視窗左側的元件面板(Palette)中,點選頁面布局(Layout)中的水平排列(HorizontalArrangement)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,接著按重新命名(Rename)將其名字改為TherrButons。



步驟六:再來到右邊的屬性(Properties)面板,將寬度(Width)改為Fill parent後按ok。


























步驟七:至中間的畫面預覽(Viewer)視窗中,將紅色、藍色、綠色的按鈕分別拖曳到綠色框框中。(在拖曳時會看到有藍色的線讓你對齊)



步驟八:在視窗左側的元件面板(Palette)中,點選繪圖和動畫(Drawing and Animating)類別中的畫布(Canvas),按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,接著按重新命名(Rename)將其名字改為DrawingCanvas



步驟九:再來到右邊的屬性(Properties)面板修改屬性,先點擊背景圖案(BackgroundImage)按上傳檔案(Upload File)上傳一張圖片,這裡我們上傳的是在第一支程式Hello Purr中有用過的貓咪圖片(可在上面需求元件中下載),並將寬度(Width)改為Fill parent和高度(Height)改為300像素。



步驟十:最後我們再到視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方,接著請到右邊的屬性(Properties)面板上,找到 Text 屬性,將方框中預設的文字改為擦除,並將其重新命名(Rename)把名字改為ButtonWipe,然後我們就可以開始編寫程式囉!



步驟十一:請在左側Blocks選單中點選 ButtonRed,在彈出的拼圖式程式區塊中選取 when ButtonRed Click,置於預覽視窗中。


步驟十二:請在左側Blocks選單中點選DrawingCanvas,在彈出的拼圖式程式區塊中選取 set DrawingCanvas.PaintColor to ,置於 when ButtonRed Click的do後面,接著在左側Blocks選單中點選Built-in下的顏色(Colors)選擇裡面的紅色色塊,把紅色色塊放置在to後面


步驟十三:重複步驟十二,在 when ButtonBlue Click中一樣放入set DrawingCanvas.PaintColor to ,但這次to後面請放上藍色色塊。並 when ButtonGreen Click中一樣放入set DrawingCanvas.PaintColor to ,這次to後面請放上綠色色塊,完成後如下。



步驟十四:請在左側Blocks選單中點選ButtonWipe,在彈出的拼圖式程式區塊中選取 when ButtonWipe Click置於預覽視窗中,接著請在左側Blocks選單中點選DrawingCanvas在彈出的拼圖式程式區塊中選取 call DrawingCanvas.Clear ,置於when ButtonWipe Click的do後面。


解釋:步驟十一到十四寫的部分是讓按鈕按下時,分別可以跑出紅色、藍色、綠色、並且可以有清除的動作。


步驟十五:請在左側Blocks選單中點選DrawingCanvas,在彈出的拼圖式程式區塊中選取 when DrawingCanvas.Touched 接著在同一個地方點 call DrawingCanvas.DrawCircle 將它放置在do的後面。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取 get,將get拖移置x後面並在 get 後的空白處中按一下選取 x,在拖曳出一個 get 在空白處按一下選取 y並移到 y的後面。
請到左側點選數學(Math),在彈出的拼圖式程式區塊中選取 0,並將0改為5,拖曳至 r的後面。


解釋:在步驟十五中,我們設定當我們點擊,點擊處就是圓心的位置,你可以自己調整 r 後面的數字,用來改變你的線條粗細。


步驟十六:請在左側Blocks選單中點選DrawingCanvas,在彈出的拼圖式程式區塊中選取DrawingCanvas.Dragged接著在同一個地方點 call DrawingCanvas.DrawLine 將它放置在do的後面。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取 get,將get拖移置x1後面並在 get 後的空白處按一下選取至 PrevX ,在拖曳出一個 get 在空白處按一下選取 至PrevY 並移到 y 1的後面。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取 get,將get拖移置x2後面並在 get 後的空白處中按一下選取至 currentX ,在拖曳出一個 get 在空白處按一下選取至 currentY 並移到 y2的後面。



解釋:在步驟十六中,PrevX、PrevY是起點座標。 currentX、 currentY是終點座標。使用DrawLine是用來幫助畫出來的是直線。


完整程式如下:




















恭喜完成此次範例程式。

2 則留言:

  1. 請問有辦法畫出折線圖嗎?

    回覆刪除
  2. 畫出來的線很細,怎樣能讓它粗一點?

    回覆刪除