App inventor 2 PaintPot (Part 1)

 App inventor 2 PaintPot (Part 1)

https://appinventor.mit.edu/explore/ai2/paintpot-part1

step1；設置組件

您將使用這些組件來製作 PaintPot：

1.三個按鈕用於選擇紅色、藍色或綠色油漆，另一個按鈕用於清除繪圖。

2.畫布，繪圖表面。 此畫布有一個 BackgroundImage，它是 HelloPurr 教程中的這隻小貓。 您也可以在空白畫布上繪圖。 那隻是沒有背景圖像的畫布。

還有一個您看不到的組件：您使用 HorizontalArrangement 使三個顏色按鈕並排排列。

這總共有五個組件。 讓我們獲取它們並構建應用程序。

Step2:顏色按鈕

• 將Button組件拖到 Viewer 上，並將 Button 的Text屬性更改為“Red”，並將其BackgroundColor設置為紅色。
• 單擊查看器中組件列表中的Button1以突出顯示它（它可能已經突出顯示）並使用重命名...按鈕將其名稱從“Button1”更改為“ButtonRed”。
• 同樣，再製作兩個藍色和綠色按鈕，分別命名為“ButtonBlue”和“ButtonGreen”，將它們垂直放置在紅色按鈕下方。
• 
  
  

  Step3:帶屏幕排列的佈局

  您現在應該有三個按鈕，一個在另一個下方。下一步是使它們水平排列。您可以使用Horizo​​ntalArrangement組件執行此操作。

  1. 從 Palette 的 Layout 抽屜中，拖出一個Horizo​​ntalArrangement組件並將其放在按鈕下方。將此組件的名稱從“Horizo​​ntalArrangement1”更改為“ThreeButtons”。
  2. 在“屬性”面板中，將 ThreeButtons 的 Width 更改為“ Fill Parent...”，使其填充屏幕的整個寬度。
  3. 將三個按鈕並排拖動到Horizo​​ntalArrangement組件中。提示：你會看到一條藍色的垂直線，顯示你拖動的棋子的去向。

  如果您查看項目組件列表，您會看到三個按鈕縮進到ThreeButtons下，表明它們現在是它的子組件。請注意，所有組件都在Screen1下縮進。

• 
  

• step4:畫布和擦除按鈕

• 最後兩個組件是畫布和擦除按鈕。

• 1. 從 Palette 的繪圖和動畫抽屜中，將Canvas組件拖到查看器上。將其名稱更改為“DrawingCanvas”。將其寬度設置為“填充父級”並將其高度設置為 300 像素。
  2. 將背景圖像添加到畫布。在 Canvas 的屬性面板中單擊BackgroundImage旁邊的包含“None...”的字段。您可以使用 HelloPurr 教程中的相同kitty.png文件，也可以使用您選擇的其他圖像。
     
  3. 從 Palette 中，將最後一個Button拖到屏幕上，將其放在 Canvas 下方。將此 Button 組件重命名為“ButtonWipe”並將其Text屬性更改為“Wipe”。

  您現在已完成設置應用外觀的步驟。這是在 Designer 中的外觀。接下來，您將定義組件的行為方式。

• 
  
  
  
  
  
  step5:設定畫布-畫筆顏色及清除畫面

  
  

• 
  Step6:畫點與畫線
• 
  
  
  Step7:上傳
•