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

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

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

main.xml

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

步骤三：完成我们的Activity

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

这样就可以了。

效果图：

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

原文参考：点击打开链接

代码：点击下载