Android学习笔记之图像颜色处理（ColorMatrix）

对图像进行颜色方面的处理，通过使用颜色矩阵（ColorMatrix）来实现。从而可以达到很多特效如黑白老照片、泛黄旧照片等等。

1.颜色矩阵(ColorMatrix)

这里有详细的介绍：http://developer.android.com/reference/android/graphics/ColorMatrix.html

不过是英文的，在这里我就先导读一下。

一张位图可以转换为一个5*4的矩阵，涉及到颜色和透明度。如图1所示。在Android中，颜色矩阵M是以一维数组m=[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t]的方式进行存储的。

   

                      图1

在一张图片中，图像的RGBA（红色、绿色、蓝色、透明度）值决定了该图片所呈现出来的颜色效果。
而图像的RGBA值则存储在一个5*1的颜色分量矩阵C中，由颜色分量矩阵C可以控制图像的颜色效果。颜色分量矩阵C如图2所示。

         

                图2

要想改变一张图片的颜色效果，只需要改变图像的颜色分量矩阵即可。通过颜色矩阵可以很方便的修改图像的颜色分量矩阵。假设修改后的图像颜色分量矩阵为C1，则有如图3所示的颜色分量矩阵计算公式。

                                                             图3

由此可见，通过颜色矩阵修改了原图像的RGBA值，从而达到了改变图片颜色效果的目的。并且，通过如图3所示的运算可知，颜色矩阵M的第一行参数abcde决定了图像的红色成分，第二行参数fghij决定了图像的绿色成分，第三行参数klmno决定了图像的蓝色成分，第四行参数pqrst决定了图像的透明度，第五列参数ejot是颜色的偏移量。
通常，改变颜色分量时可以通过修改第5列的颜色偏移量来实现，如图4所示的颜色矩阵M1，通过计算后可以得知该颜色矩阵的作用是使图像的红色分量和绿色分量均增加100，这样的效果就是图片泛黄（因为红色与绿色混合后得到黄色）。

                  图4

除此之外，也可以通过直接对颜色值乘以某一系数而达到改变颜色分量的目的。如图5所示的颜色矩阵M2，将绿色分量放大了2倍，这样的效果就是图片泛绿色。

                 图5

实例：

步骤一：我们首先自定义一个view，用来显示我们处理的图片。

ColorView.java

[java] view plaincopy

1. package com.mycolor;  
2.   
3. import android.content.Context;  
4. import android.graphics.Bitmap;  
5. import android.graphics.BitmapFactory;  
6. import android.graphics.Canvas;  
7. import android.graphics.ColorMatrix;  
8. import android.graphics.ColorMatrixColorFilter;  
9. import android.graphics.Paint;  
10. import android.util.AttributeSet;  
11. import android.widget.ImageView;  
12.   
13. public class ColorView extends ImageView {  
14.   
15.     private Paint myPaint = null;  
16.     private Bitmap bitmap = null;  
17.     private ColorMatrix myColorMatrix = null;  
18.     private float[] colorArray = {1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0};  
19.       
20.     public ColorView(Context context, AttributeSet attrs)  
21.     {  
22.         super(context, attrs);  
23.         bitmap = BitmapFactory.decodeResource(context.getResources(),R.drawable.a2);   
24.         invalidate();   
25.     }  
26.     @Override  
27.     protected void onDraw(Canvas canvas) {  
28.         super.onDraw(canvas);  
29.         //新建画笔对象  
30.         myPaint = new Paint();     
31.         //描画（原始图片）      
32.         canvas.drawBitmap(bitmap,0, 0, myPaint);        
33.         //新建颜色矩阵对象      
34.         myColorMatrix = new ColorMatrix();     
35.         //设置颜色矩阵的值  
36.         myColorMatrix.set(colorArray);             
37.         //设置画笔颜色过滤器      
38.         myPaint.setColorFilter(new ColorMatrixColorFilter(myColorMatrix));     
39.          //描画（处理后的图片）  
40.         canvas.drawBitmap(bitmap,0,0,myPaint);  
41.         invalidate();   
42.     }  
43.     //设置颜色数值  
44.     public void setColorArray(float[] colorArray){  
45.         this.colorArray = colorArray;  
46.     }  
47.     //设置图片  
48.     public void setBitmap(Bitmap bitmap){  
49.         this.bitmap = bitmap;  
50.     }  
51. }  

步骤二：自定义我们的布局

main.xml

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/colorView_layout"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:orientation="vertical" >  
7.   
8.     <com.mycolor.ColorView  
9.         android:id="@+id/myColorView"  
10.         android:layout_width="480dp"  
11.         android:layout_height="180dp"/>  
12.     <LinearLayout  
13.         android:id="@+id/colorlayout1"  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="wrap_content"  
16.         android:orientation="horizontal" >  
17.   
18.         <EditText  
19.             android:id="@+id/Edit1"  
20.             android:layout_width="50dp"  
21.             android:layout_height="40dp"  
22.             android:layout_weight="1"  
23.             android:text="1" />  
24.   
25.         <EditText  
26.             android:id="@+id/Edit2"  
27.             android:layout_width="50dp"  
28.             android:layout_height="40dp"  
29.             android:layout_weight="1"  
30.             android:text="0"   
31.             />  
32.   
33.         <EditText  
34.             android:id="@+id/Edit3"  
35.             android:layout_width="50dp"  
36.             android:layout_height="40dp"  
37.             android:layout_weight="1"  
38.             android:text="0" />  
39.   
40.         <EditText  
41.             android:id="@+id/Edit4"  
42.             android:layout_width="50dp"  
43.             android:layout_height="40dp"  
44.             android:layout_weight="1"  
45.             android:text="0" />  
46.   
47.         <EditText  
48.             android:id="@+id/Edit5"  
49.             android:layout_width="50dp"  
50.             android:layout_height="40dp"  
51.             android:layout_weight="1"  
52.             android:text="0" />  
53.     </LinearLayout>  
54.   
55.     <LinearLayout  
56.         android:id="@+id/colorlayout2"  
57.         android:layout_width="fill_parent"  
58.         android:layout_height="wrap_content"  
59.         android:orientation="horizontal" >  
60.   
61.         <EditText  
62.             android:id="@+id/Edit6"  
63.             android:layout_width="50dp"  
64.             android:layout_height="40dp"  
65.             android:layout_weight="1"  
66.             android:text="0" />  
67.   
68.         <EditText  
69.             android:id="@+id/Edit7"  
70.             android:layout_width="50dp"  
71.             android:layout_height="40dp"  
72.             android:layout_weight="1"  
73.             android:text="1" />  
74.   
75.         <EditText  
76.             android:id="@+id/Edit8"  
77.             android:layout_width="50dp"  
78.             android:layout_height="40dp"  
79.             android:layout_weight="1"  
80.             android:text="0" />  
81.   
82.         <EditText  
83.             android:id="@+id/Edit9"  
84.             android:layout_width="50dp"  
85.             android:layout_height="40dp"  
86.             android:layout_weight="1"  
87.             android:text="0" />  
88.   
89.         <EditText  
90.             android:id="@+id/Edit10"  
91.             android:layout_width="50dp"  
92.             android:layout_height="40dp"  
93.             android:layout_weight="1"  
94.             android:text="0" />  
95.     </LinearLayout>  
96.   
97.     <LinearLayout  
98.         android:id="@+id/colorlayout3"  
99.         android:layout_width="fill_parent"  
100.         android:layout_height="wrap_content"  
101.         android:orientation="horizontal" >  
102.   
103.         <EditText  
104.             android:id="@+id/Edit11"  
105.             android:layout_width="50dp"  
106.             android:layout_height="40dp"  
107.             android:layout_weight="1"  
108.             android:text="0" />  
109.   
110.         <EditText  
111.             android:id="@+id/Edit12"  
112.             android:layout_width="50dp"  
113.             android:layout_height="40dp"  
114.             android:layout_weight="1"  
115.             android:text="0" />  
116.   
117.         <EditText  
118.             android:id="@+id/Edit13"  
119.             android:layout_width="50dp"  
120.             android:layout_height="40dp"  
121.             android:layout_weight="1"  
122.             android:text="1" />  
123.   
124.         <EditText  
125.             android:id="@+id/Edit14"  
126.             android:layout_width="50dp"  
127.             android:layout_height="40dp"  
128.             android:layout_weight="1"  
129.             android:text="0" />  
130.   
131.         <EditText  
132.             android:id="@+id/Edit15"  
133.             android:layout_width="50dp"  
134.             android:layout_height="40dp"  
135.             android:layout_weight="1"  
136.             android:text="0" />  
137.     </LinearLayout>  
138.   
139.     <LinearLayout  
140.         android:id="@+id/colorlayout4"  
141.         android:layout_width="fill_parent"  
142.         android:layout_height="wrap_content"  
143.         android:orientation="horizontal" >  
144.   
145.         <EditText  
146.             android:id="@+id/Edit16"  
147.             android:layout_width="50dp"  
148.             android:layout_height="40dp"  
149.             android:layout_weight="1"  
150.             android:text="0" />  
151.   
152.         <EditText  
153.             android:id="@+id/Edit17"  
154.             android:layout_width="50dp"  
155.             android:layout_height="40dp"  
156.             android:layout_weight="1"  
157.             android:text="0" />  
158.   
159.         <EditText  
160.             android:id="@+id/Edit18"  
161.             android:layout_width="50dp"  
162.             android:layout_height="40dp"  
163.             android:layout_weight="1"  
164.             android:text="0" />  
165.   
166.         <EditText  
167.             android:id="@+id/Edit19"  
168.             android:layout_width="50dp"  
169.             android:layout_height="40dp"  
170.             android:layout_weight="1"  
171.             android:text="1" />  
172.   
173.         <EditText  
174.             android:id="@+id/Edit20"  
175.             android:layout_width="50dp"  
176.             android:layout_height="40dp"  
177.             android:layout_weight="1"  
178.             android:text="0" />  
179.     </LinearLayout>  
180.   
181.     <Button  
182.         android:id="@+id/Button"  
183.         android:layout_width="fill_parent"  
184.         android:layout_height="wrap_content"  
185.         android:layout_marginBottom="0dp"  
186.         android:text="提交" />  
187.   
188. </LinearLayout>  

步骤三：完成我们的Activity

[java] view plaincopy

1. package com.mycolor;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.View.OnClickListener;  
7. import android.widget.Button;  
8. import android.widget.EditText;  
9.   
10. public class ColorActivity extends Activity  implements OnClickListener{  
11.       
12.       
13.     private Button button = null;  
14.     private ColorView colorView = null;  
15.     private EditText[] editTextArray = null;  
16.     private float colorArray[] = null;  
17.     private int[] EditTextID = {R.id.Edit1,R.id.Edit2,R.id.Edit3,R.id.Edit4,R.id.Edit5,  
18.                                 R.id.Edit6,R.id.Edit7,R.id.Edit8,R.id.Edit9,R.id.Edit10,  
19.                                 R.id.Edit11,R.id.Edit12,R.id.Edit13,R.id.Edit14,R.id.Edit15,  
20.                                 R.id.Edit16,R.id.Edit17,R.id.Edit18,R.id.Edit19,R.id.Edit20};  
21.     @Override  
22.     public void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.         setContentView(R.layout.main);  
25.           
26.           
27.         button = (Button)findViewById(R.id.Button);  
28.         button.setOnClickListener(this);  
29.           
30.         editTextArray = new EditText[20];  
31.         colorArray = new float[20];  
32.         for(int i = 0;i < 20;i++){  
33.             editTextArray[i] = (EditText)findViewById(EditTextID[i]);  
34.         }  
35.           
36.         colorView = (ColorView)findViewById(R.id.myColorView);  
37.     }  
38.     @Override  
39.     public void onClick(View v) {  
40.         for(int i = 0;i < 20;i++){  
41.             colorArray[i] = Float.valueOf(editTextArray[i].getText().toString().trim());  
42.             System.out.println("i = " + i + ":" + editTextArray[i].getText().toString().trim());  
43.         }  
44.         colorView.setColorArray(colorArray);  
45.     }  
46. }  

这样就可以了。

效果图：

改变值可以呈现不同的效果：