
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+ 創意 App 程式設計認證指南 第三類:App Inventor 進階人機互動與檔案存取應用
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊

