App Inventor學習記錄221-HEX色碼、RGB色碼轉換外掛~ColorUtilities

ColorUtilities的功能比標題寫的更多,但這次只用到 HEX色碼、RGB色碼轉換這兩個功能。
記錄一下:
App Inventor學習記錄221-HEX色碼、RGB色碼轉換外掛~ColorUtilities


這次範例的完成品如下。

在兩個畫布上稍微滑動一下之後,就會取得色盤的顏色,並顯示在下面的標籤上。

顏色混合按鈕,可以混合兩個顏色,滑桿原件可以調整比例。
顏色轉 hex碼按鈕,可以把 hex色碼直接變成顏色。


畫面編排的部份如上。
兩個色盤是用設定 canvas的背景圖片來做的。


全部的程式方塊如上。


當螢幕初始化的時候,把 canvas 1和 canvas 2的高度,設定為螢幕寬度的一半。
在畫面配置的時候,有把兩個 canvas的寬度設定為 full parent,所以這裡在設定畫布的高度為螢幕的一半之後,我們就可以得到兩個正方形的畫布。


when canvas.dragged,當畫布滑動的時候。
把標籤 1的背景顏色,設定成手指頭點到的顏色。這個部份我們用 call canvas 1.get background pixel color這個方塊來做。

把標籤 4的文字,設定成三種顯示顏色的方式,
分別是 label 1.background color,標籤 1的背景顏色。
split color label 1.background color,改成 RGB色碼。
call color utilities 1.convert in to hex,外掛方塊中把顏色轉成 hex色碼的方塊。
int color參數,放入 label 1.backgound color標籤 1的背景顏色。


三種方式顯示如上圖。


畫布 2的做法跟畫布 1的作法是相同的。


顏色混合按鈕按下後,設定標籤 3的背景顏色為兩個顏色的混合。

call color utilities 1.blend colors,呼叫外掛中混合 2個顏色的方塊。
color 1參數,放顏色 1。
color 2參數,放顏色 2。
ratio參數,可以放 0~1的值


按鈕 2按下的時候,把文字輸入盒 1輸入的 hex色碼轉成標籤 8的背景顏色。


用滑桿的最小值和最大值設定為 0跟 1。
所以滑動在滑動的時候,把 thumb postion的值代入到 ratio參數中。

好的,全部的程式方塊都簡單說明過了,建議大家試著做一次,就會用的越來越熟。
但如果不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發佈留言