TQC+ 創意 App 程式設計認證指南 308 取得像素顏色
App Inventor,  第3類:App Inventor 進階人機互動與檔案存取應用

TQC+ 創意 App 程式設計認證指南 308 取得像素顏色

1. 題目說明:

請開啟 IND03.aia 專案,設計「取得像素顏色」程式。點擊 Canvas 元件畫面上的任一處都會將該處的顏色解析結果顯示於畫面下方的 Label 元件。畫面上的三個 Slider 元件也會根據紅色、綠色與藍色的強度來移動到指定位置。請依下列題意完成作答,並製成封裝檔 IND03.apk,作答完成,請將 aia 專案檔及 apk 封裝檔皆下載並儲存於 C:\ANS.CSF 原專案的資料夾内。

<參考圖>


2. 設計說明:

(1) 加入一個 Canvas 元件,背景圖片請上傳 color_wheel.png。在點擊 Canvas 元件任一處時,會在點擊處顯示像素顏色數值 (Canvas 元件的 getPixelColor 指令)。另外還會將該處的像素顏色資料解析出紅色、綠色與藍色等三原色顯示於 Label 元件。

(2) 加入三個 Slider 元件,可用來顯示顏色強度,方別將其 ColorLeft 欄位改為紅色、綠色與藍色。最小值 (MinValue) 為 0,最大值 (MaxValue) 為 255,以對應顏色強度的範圍。Slider 的指針位置 (ThumbPosition) 會根據點擊處的顏色解析結果移動到對應的位置。

(3) 加入一個 Label 元件,可用來顯示顏色解析結果,Text 欄位須清空,程式執行時會把點擊處的三原色數值顯示出來,顯示格式為【紅色:R / 綠色:G / 藍色:B】,RGB 分別代表點擊處的顏色解析結果



3. 執行結果參考畫面:

(1) 程式初始畫面,黑點位於 Canvas 元件中央,滑桿也位於中央。



(2) 點擊 Canvas 元件後,黑球移動到點擊位置,並於點擊位置顯示數值。滑桿顯示與顏色解析皆正確。





IND03.aia 檔案下載

color_wheel.png 檔案下載



TQC_308.aia 檔案下載





TQC+ 創意 App 程式設計認證指南 第三類:App Inventor 進階人機互動與檔案存取應用




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

發表迴響