Unit 7-1 Canvas 作畫 / 作業 08

建立一個畫布

MIT App Inventor 2

http://ai2.appinventor.mit.edu/

首先建立一個專案

放一個 HorizontalArrangement 到畫面上並且在裡面放入三個按鈕

點選左邊的 Drawing and Animation 並且選擇 Canvas 放到螢幕上

三個按鈕分別將文字設定為「Circle」「Square」「Clear」

將 Canvas 物件的寬與高都設定為 Fill parent

元件結構

Blocks / 程式碼部分

點選 Screen1 並且叫出 when Screen1.Initialize 到畫面上

點選 Canvas1 選擇 set Canvas1.FontSize to 以及數字 45 放到畫面上

再次選擇 Canvas1 底下的 set Canvas1.LineWidth to 以及數字 5 放到畫面上

放入一個 When Button1.Click 到畫面上

選擇 Canvas1 底下的 call Canvas1.DrawCircle 放到裡面

將 centerX 放入數字 120、centerY 放入數字 130、radius 放入數字 10

放入一個 when Button2.Click 到畫面上

選擇 Canvas1 放入四個 call Canvas1.DrawLine 到裡面

四條線的座標分別為「50.50.50.100」「50.100.100.100」「100.100.100.50」「100.50.50.50」

放入 when Button3.Click 到螢幕畫面上，裡面放入 Canvas1 底下的 call Canvas1.Clear

手機安裝畫面(影片呈現)

範例檔案下載：點我下載