App Inventor學習記錄133-標籤可點擊、取得圖片按下放開位置的外掛~LabImgClick

標籤可點擊、取得圖片按下放開位置的外掛~LabImgClickApp Inventor


這次的範例完成品如下。

加上這一個外掛之後,標籤就會變的可以點擊,雖然沒有產生點擊的效果出現。
圖片則是加了可以取得按下時、以及放開時的 x,y座標。


畫面編排的部份如下。

從這個看的出來,用的元件就是標籤和圖像。


全部的程式碼如下。


第 1部份的程式碼說明。

when screen1.initialize程式初始化的時候,我們要先用外掛中的 call kio4_labimgclick.touchlabel,以及 call kio4_labimgclick.touchimage這兩個程式來設定那一個標籤和圖片要加上這個外掛的效果。

從畫面配置的地方,可以看到這次拉了 2個外掛元件進來。
這是因為一個元件只能搭配一個標籤跟一個圖片。如果有多個標籤和圖片要設定的話,就要多拉幾個外掛元件進來。


第 2部份的程式碼說明。

when kio4_labimgclick1.imagedown圖片被按下的時候,把 label 3.tex標籤 3的文字,設定成文字方塊的組合。所以當我們按下圖片的時候,就會去取得按下時的 x,y座標。

when kio4_labimgclick1.imageup手指頭離開圖片的時候,把 label 3.tex標籤 3的文字,設定成文字方塊的組合。所以當我們手指頭離開圖片的時候,就會去取手指頭離開圖片時的 x,y座標。


第 3部份的程式碼說明。

這個部份跟上面是一樣的。


第 4部份的程式碼說明。

when kio4_labimgclick 1.clicklable當標籤被點擊的時候,把 label 3.text標籤 3的文字,設定成我們指定的文字。


這次的 aia檔的下載連結如下:
NO_133_click_label_image.aia

APP INVENTOR外掛
名稱:LabImgClick
外掛來源:community.thunkable.com
外掛載點:
https://community.thunkable.com/t/click-over-image-get-coordinates-pointer-event-click-over-label-event/11311

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

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

發表迴響