取得像素顏色

本範例要告訴您如何取得指定像素的顏色,當然啦,用手指頭點擊時,實際上是由手機去回傳手指頭接觸面積的中心作為觸碰點,所以如果要分得非常細的話是不太行的。但如果是用滑鼠去點模擬器就一定是那個點啦!範例程式碼請由本頁面最下方下載。

為了示範,我們把 Canvas 的背景圖片設定為這張圖,或是您可以用任何一張您喜歡的圖都可以。



程式執行畫面:在總共用到 Canvas、Ball 與三個 Slider。點擊畫面時會取得該點的 color 值,這是有公式計算的,不過我們只要透過 Color 指令集下的 split color 就可以取回該點的顏色。App Inventor 在處理顏色上是以一個 List 來管理,順序是(R, G ,B , alpha),因此紅色的話就是要取得這個清單的第一號元素,以此類推。

三個 Slider 則會根據三個顏色的強度來移動指針(thumbPosition)位置。

最下方再用一個 Label 來顯示各顏色的值。

  


程式解說

所有指令都是在 Canvas.Touched 事件下完成,您可以根據需要來改為 Dragged 或是其他的 Canvas 事件。
本範例最重要的指令就是 Canvas.GetPixelColor 指令,我們把Canvas.Touched 事件的 x, y 事件變數丟給這個指令,代表要取得點擊處的像素顏色。記得要加上 split color 指令,否則無法正確取得顏色。

接著用 Canvas.DrawText 指令把指令執行結果直接寫在 Canvas 上。

在畫面最下方的 Label 是用來顯示三個顏色的值。請注意我們用 select list item 指令來拆出Canvas.GetPixelColor 指令所回傳清單的 1 ~ 3 號元素,分別代表紅色、綠色與藍色的值(0~255)。如果您需要取得透明度 alpha ,就一併把 4號拿回來


Canvas.Touched 事件下半部是根據三個顏色的值來設定對應 Slider 的指針位置,您也許可以把 GetPixelColor 這件事寫成副程式再傳入不同的參數來取得顏色,這樣程式會更清爽喔!


曾吉弘,
2015年2月17日 清晨6:44
v.1