Android 使用ColorMatrix改變圖片顏色

原文鏈接：http://blog.csdn.net/janice0529/article/details/49207939

ColorMatrix的顏色矩陣介紹

• 顏色矩陣M是一個5*4的矩陣，在Android中，顏色矩陣M是以一維數組m=[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t]的方式進行存儲的。如下圖1：

 
圖1 顏色矩陣M

他通過RGBA四個通道來直接操作對應顏色，達到修改圖像的效果。

• 第一行決定紅色 R
• 第二行決定綠色 G
• 第三行決定藍色 B
• 第四行決定了透明度 A
• 第五列是顏色的偏移量

原圖的RGBA的ColorMatrix顏色矩陣數組為：

[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]

• 在一張圖片中，圖像的RGBA（紅色、綠色、藍色、透明度）值決定了該圖片所呈現出來的顏色效果。而圖像的RGBA值則存儲在一個5*1的顏色分量矩陣C中，由顏色分量矩陣C可以控制圖像的顏色效果。顏色分量矩陣C 如圖2所示: 
   
  圖2 顏色分量矩陣C

• 要想改變一張圖片的顏色效果，只需要改變圖像的顏色分量矩陣即可。通過顏色矩陣可以很方便的修改圖像的顏色分量矩陣。假設修改后的圖像顏色分量矩陣為C1，則有如圖3所示的顏色分量矩陣計算公式： 
   
  圖3 顏色分量矩陣計算公式

通常，改變顏色分量時可以通過修改第5列的顏色偏移量來實現，如圖4所示的顏色矩陣M1，通過計算后可以得知該顏色矩陣的作用是使圖像的紅色分量和綠色分量均增加100，這樣的效果就是圖片泛黃（因為紅色與綠色混合后得到黃色）。 
 
圖4 顏色矩陣M1

除此之外，也可以通過直接對顏色值乘以某一系數而達到改變顏色分量的目的。如圖5所示的顏色矩陣M2，將綠色分量放大了2倍，這樣的效果就是圖片泛綠色。 
 
圖5 顏色矩陣M2

————以上內容收集於網絡：http://www.android100.org/html/201406/05/19490.html———-

---

使用ColorMatrix改變圖片顏色的步驟

• 通過Bitmap.createBitmap()方法獲得一個空白的Bitmap對象。
• 使用Bitmap對象創建畫布Canvas, 然后創建畫筆Paint。
• 定義ColorMatrix，並指定RGBA矩陣。
• 使用ColorMatrix創建一個ColorMatrixColorFilter對象, 作為畫筆的濾鏡 paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix))。
• 使用Canvas.drawBitmap()方法把原圖使用定義的Paint畫到空白的Bitmap對象上即可獲得改變RGBA值后的圖像。

---

圖像顏色處理實例

• 首先准備一張用來修改顏色的黑色原始圖片 btn_pause.png 如下： 
  

• 布局文件 colormatrix_activity.xml 內容如下：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="R" /> <SeekBar android:id="@+id/sb_red" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" android:progress="0" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="G" /> <SeekBar android:id="@+id/sb_green" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" android:progress="0" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" /> <SeekBar android:id="@+id/sb_blue" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" android:progress="0" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" /> <SeekBar android:id="@+id/sb_alpha" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="255" android:progress="255" /> <ImageView android:id="@+id/iv_color_show" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:layout_gravity="center_horizontal" android:src="@drawable/btn_pause" /> </LinearLayout>

• 界面代碼 ColorMatrixActivity.java

/** * Created by lvzhengbin on 15/10/15. */ public class ColorMatrixActivity extends ActionBarActivity { private SeekBar sb_red, sb_green, sb_blue, sb_alpha; private ImageView iv_show; private Bitmap afterBitmap; private Paint paint; private Canvas canvas; private Bitmap baseBitmap; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.colormatrix_activity); initView(); } private void initView() { iv_show = (ImageView) findViewById(R.id.iv_color_show); sb_red = (SeekBar) findViewById(R.id.sb_red); sb_green = (SeekBar) findViewById(R.id.sb_green); sb_blue = (SeekBar) findViewById(R.id.sb_blue); sb_alpha = (SeekBar) findViewById(R.id.sb_alpha); sb_red.setOnSeekBarChangeListener(seekBarChange); sb_green.setOnSeekBarChangeListener(seekBarChange); sb_blue.setOnSeekBarChangeListener(seekBarChange); sb_alpha.setOnSeekBarChangeListener(seekBarChange); baseBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.btn_pause); // 1.獲取一個與baseBitmap大小一致的可編輯的空圖片 afterBitmap = Bitmap.createBitmap(baseBitmap.getWidth(), baseBitmap.getHeight(), baseBitmap.getConfig()); // 2.使用Bitmap對象創建畫布Canvas, 然后創建畫筆Paint。 canvas = new Canvas(afterBitmap); paint = new Paint(); } private SeekBar.OnSeekBarChangeListener seekBarChange = new SeekBar.OnSeekBarChangeListener() { @Override public void onStopTrackingTouch(SeekBar seekBar) { if(seekBar.getId() == R.id.sb_alpha){ iv_show.getDrawable().setAlpha(sb_alpha.getProgress()); }else{ float progressR = sb_red.getProgress(); float progressG = sb_green.getProgress(); float progressB = sb_blue.getProgress(); // 根據SeekBar定義RGBA的矩陣, 通過修改矩陣第五列顏色的偏移量改變圖片的顏色 float[] src = new float[]{ 1, 0, 0, 0, progressR, 0, 1, 0, 0, progressG, 0, 0, 1, 0, progressB, 0, 0, 0, 1, 0}; // 3.定義ColorMatrix，並指定RGBA矩陣 ColorMatrix colorMatrix = new ColorMatrix(); colorMatrix.set(src); // 4.使用ColorMatrix創建一個ColorMatrixColorFilter對象, 作為畫筆的濾鏡, 設置Paint的顏色 paint.setColorFilter(new ColorMatrixColorFilter(src)); // 5.通過指定了RGBA矩陣的Paint把原圖畫到空白圖片上 canvas.drawBitmap(baseBitmap, new Matrix(), paint); iv_show.setImageBitmap(afterBitmap); } } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) { } }; }

• 我們可以通過SeekBar調節RGB的值來修改圖片的顏色來達到不同的效果，運行效果如下：