App Inventor學習記錄33,製作有畫線、拍照、橡皮擦等功能的小畫家 app

小畫家畫線條的功能,基本上都是在畫布這個元件上完成的,這裡會簡單的介紹一下。很常用,但比較少人介紹的橡皮擦功能,也會在這裡提供寫法。

記錄一下:
App Inventor學習記錄33,製作有畫線、拍照、橡皮擦等功能的小畫家 app


同樣的先來展示一下畫面編排的部份。

這裡大家可以看到,有選擇顏色的區塊,這是類似app必備的功能。
再來是畫線、線變粗變細、橡皮擦功能,也是必備的功能。
這邊是特別把橡皮擦功能拿出來講一下,這個功能的原理很長,我看的不是很懂,是在國外的某個論壇看到的寫法,是可以成功使用。

另外,就是拍照後把相片變成畫布背景的功能,存檔的功能、清除畫布內容的功能。拍照變畫布背景的功能挺好玩的,笨蛋柔還挺常玩的。


全部的程式碼在這裡,為了簡短一下,我把畫圓等等的功能先拿掉。只留下幾個我覺得比較重要的功能來做介紹。


第 1段的程式碼說明:

新建 3個變數。
畫圖功能這個變數,是等下用來決定畫布被拖曳的時候,要用那個功能
線條粗細存檔順序這 2個變數,不用解釋,就是字面上的意思。


第 2段的程式碼說明:

在選擇顏色這裡,這一次是用按鈕來做,把按鈕的顯示文字在畫面編排的時候,設定為空白,背景顏色改一下。然後在程式設計這裡,設定成當按鈕被點搫的時候,就把 Canvas1.PaintColor畫布畫筆的顏色,設定成我們指定的顏色就可以了。


第 3段的程式碼說明:

當按下畫線按鈕的時候:
就把 global畫圖功能這個變數的值,設定成畫線。
然後我們再到畫布被拖曳的時候,用這個值來決定功能。


第 4段的程式碼說明:

當線變粗按鈕被點選的時候:
加入一個流程判斷:
如果 global的值為 51的話,就把 Canvas1.LineWidth畫布的畫筆寬度,設定為 51。
這一個條件是設定畫筆寬度的上限就是 51。

不然的話,就把線條粗細的值,設定為 global的值每點擊一次加 5。
然後,把 Canvas1.LineWidth畫布的畫筆寬度,設定為 global線條粗細的值。


第 5段的程式碼說明:

當線變細按鈕被點選的時候:
加入一個流程判斷:
如果 global的值為 11的話,就把 Canvas1.LineWidth畫布的畫筆寬度,設定為 1。
這一個條件是設定畫筆寬度的下限就是 1。

不然的話,就把線條粗細的值,設定為 global的值每點擊一次減 5。
然後,把 Canvas1.LineWidth畫布的畫筆寬度,設定為 global線條粗細的值。


第 6段的程式碼說明:

當按下橡皮擦按鈕的時候:
就把 global畫圖功能這個變數的值,設定成橡皮擦。
然後我們再到畫布被拖曳的時候,用這個值來決定功能。


第 7段的程式碼說明:

當按下拍照按鈕的時候:
call Camera1.TakePicture呼叫相機拍照的功能。

當 Camera1.AfterPicture當相機拍完照片之後:
set Canvas1.BackgroundImage把畫布的背景圖片設定為拍照片的圖片。

當按下清除按鈕的時候:
call Canvas1.Clear呼叫畫布清除的功能,把畫布上的東西都清除。


第 8段的程式碼說明:

當畫布被拖曳的時候:
設定畫布的畫筆寬度為 globe線條粗細這個變數的值。

然後加入一個流程判斷:
如果 global畫圖功能的值等於橡皮擦的時候,
把畫布畫筆的顏色,設定成 255、255、255、0,這代表取的顏色是背景色。
然後呼叫畫布畫線的功能。

不然的話,就呼叫畫布畫線的功能。

這裡其它還要加上畫圖、畫空心圓等等的功能上去,所以會有好幾個判斷式在,這裡為了簡化,就只先留下畫線以及橡皮擦的功能。以後再來一個一個的加上去。


第 9段的程式碼說明:

當按下存檔按鈕的時候:
call Canvas1.SaveAs呼叫畫布存檔的功能,fileName這裡用文字組合方塊來訂名稱及副檔名。
然後把 global存檔順序的值,設定為每存檔 1次就加1。

這裡要補充說明一下,由於畫布存檔這個方塊接頭不對,所以我們流程控制裡頭,可以找到 evaluate but ingore result求值但忽略結果的方塊,拿這個方塊來當轉接頭用就可以了。

另外,存檔的時候,記得要有副檔名,不然也存不了檔。


存檔的位置的預設值是在 Android>data>app名稱下面的資料夾裡。


拍照的功能用模擬器是看不出效果的,所以要試的朋友,記得要安裝到手機上。
拍照的旋轉的位置,每隻手機不相同,所以應該還要在加上一個預覽的效果才比較好。
畫圓、加文字、畫形狀等等的功能也還要在加上去。
存檔的路徑要再修改。
這個是暫時想到要改的部份,一樣,後面我們再來一個一個的往上加。

這次的 aia檔的下載連結如下:
點我下載NO_33_Camara_and_Draw

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響