App Inventor學習記錄35,用圖像精靈元件,來做畫布的游標

我們在第 33號的檔案中,已經製作了一個有畫線、拍照、橡皮擦等功能的小畫家 app,小畫家很妙的地方是可以加上很多種功能,這次就加上的就是游標的功能。這一次我們要用圖像精靈來做。

記錄一下:
App Inventor學習記錄35,用圖像精靈來做畫布的游標


首先同樣來看一下畫面編排的部份,為了可以突顯出這一次要介紹的功能,所以額外重新拉了一個專案,這樣在後面拉程式方塊的時候,會看的比較清楚。
這次的重點,就是圖像精靈 ImageSprite

2個按鈕來切換筆或是擦皮擦的圖示。
1圖像精靈放在 1個畫面裡頭。


全部的程式碼是這樣。


第 1部份的程式碼說明

當筆這個按鈕被按下之後,把圖像精靈 ImageSprite1的圖片,設定為 pencil.png
當橡皮擦這個按鈕被按下之後,把圖像精靈 ImageSprite1的圖片,設定為 erase.png

這裡建議大家用去背後的圖檔來當游標,這樣才不會擋到畫布原本的背景。
去背的方法之前也介紹過一些,給大家整理一下:
線上去背的網站:
BACKGROUND BURNER,人人都能會用的線上去背網站
Remove.bg,超強的線上人像去背工具,5秒自動去背
PhotoScissors,簡單好用又免費的圖片線上去背工具
Sticker Mule~免費線上工具,圖片全自動化去背景

軟體去背
LINE原創貼圖(1)-怎麼用PHOTOCAP替圖片去背

簡單的圖,我通常用的還是 PHOTOCAP,畢竟用的挺習怪的。如果不想要幫圖片額外去背的話,也可以找一下免費的 PNG素材下載。這部份之前都沒有介紹過,我是搜集了一些,下次整理一下再來分享給大家。


第 2部份的程式碼說明:

當畫布被點擊的時候:
把圖像精靈 ImageSprite1移動到手指頭目前點到的 x,y這個座標上。


第 3段的程式碼說明:

當畫面被拖曳的時候:
把畫布的線寬,設定為 5。
呼叫圖像精靈,移動到目前的 x,y座標上。
呼叫畫布畫線的功能。


實際的使用畫面就會像這樣子


在小畫家的 app中,我覺得這個功能挺有必要加上去的,只是大家可能會發現,怎麼手指頭點的地方,不是在鉛筆筆尖的地方。沒錯,這是因為在 app inventor在移動圖片的時候,都是以左上角的這個點當基準

所以我們可以選擇一張筆尖在左上角這個點的圖片來使用,或者是調整一下程式碼的部份。
這個我們下一篇就來介紹一下。

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

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

發表迴響