App inventor 2_刮刮卡

前面做了一個圖片刮刮樂，可以刮除整張卡片而看到後面的圖片，

接著，就想到能否用這個效果來做一個類似刮刮卡的功能。和前面

不同的地方是要設好幾個刮除區域讓人可以刮，也就是要設多個畫

布元件剛好遮住金額區域。

首先，準備一張設計好獎金金額和刮除金額的圖片，並將它設為

Screen1的背景圖案，然後加入多個畫布元件，並配合水平布局，

將畫布元布排列好，利用高度及寬度像素設定，讓它能剛好遮住

金額區域，調整這些畫布的元件位置是最傷腦筋的地方，要不斷

調整、測試，才勉強成功。

至於程式部份，和圖片刮刮樂差不多，只是要多複製幾個畫布元件

程式。

設計畫面：

























元件清單：


程式碼：




完成圖：

App inventor 2_圖片刮刮樂

8月8日～10日去研習了App inventor 2，雖然之前有玩過App inventor，但有

一段時間沒摸了，因為玩Arduino之後，以後可能會需要用手機操控一些專題

，因此想再去學習一下。

經過3天的練習，已有了基本的概念，其實它非常類似Scratch的操作，有了

Scratch的經驗，更容易上手App inventor 2了。

這個專案是想要設計一個類似刮刮樂的效果，刮一刮之後就能看見圖片。

關鍵在於圖案的上面塗上一層顏色，然後將畫筆設成透明的顏色，再將原

本的顏色抹除，就能看見圖片了。

用到的元件：畫布、按鈕(重置鍵、清除鍵)。

設計說明：上傳一張圖片，設為Screen1的背景圖片，然後在Screen1初

始化的時候，設定畫筆為灰色，畫一個大圓塗滿畫布元件，也就是遮住

圖片，然後立刻設定畫筆為透明色。拖動或點按畫面時，就能消除灰色。













程式碼如下：


效果就如下：