[关闭]
@coder-pig 2015-10-28T11:19:22.000000Z 字数 9179 阅读 1799

Android基础入门教程——8.3.9 Paint API之—— ColorFilter(颜色过滤器)(1/3)

Android基础入门教程


本节引言:

上节我们学习了MaskFilter(面具),用它的两个子类BlurMaskFilter弄了下模糊效果,EmbossMaskFilter
弄了下浮雕效果,而本节我们来学习的是另一个API——ColorFilter(颜色过滤器),和MaskFilter一样,
我们并不直接使用该类,而是使用该类的三个子类:
颜色矩阵颜色过滤器ColorMatrixColorFilter
光照色彩过滤器LightingColorFilter
混排颜色过滤器滤器PorterDuffColorFilter
本节我们就来学习下第一个ColorMatrixColorFilter的使用吧,打开ColorMatrixColorFilter的文档,

大概说的是:通过一个4 x 5的颜色矩阵来变换颜色,可以修改像素的饱和度,将YUV转换成RGB等!
而构造方法中的ColorMatrix就是颜色矩阵,也是我们学习的核心,下面听我一一道来!
PS:ColorMatrix的API文档


1.相关常识的普及:

RGBA模型:

RGBA不知道你听过没,黄绿蓝知道了吧,光的三基色,而RAGB则是在此的基础上多了一个透明度!
R(Red红色)G(Green绿色)B(Blue蓝色)A(Alpha透明度);另外要和颜料的三
原色区分开来哦,最明显的区别就是颜料的三原色中用黄色替换了光三基色中的绿色!知道下就好,
有兴趣的可自行百度~

一些名词:


2.ColorMatrix的解读

如题,颜色矩阵(4 * 5),我们可以修改矩阵中的值,来实现黑白照,泛黄老照片,高对比度等效果!
手撕颜色矩阵解释图如下:

不知道你看懂上图没,如果你学过高数的话,肯定对此很熟悉,无非是矩阵的叉乘而已,没学过也没关系
计算方法就是右下角那个,拿颜色矩阵的每一行来 * 颜色矩阵分量的每一列
很典型的一个例子,处理前后的结果比较,我们还可以让某个颜色值 * 一个常数,比如让第三行(蓝)
乘以2,效果就变成泛蓝色了,当然,我们肯定要写代码来验证验证上面的结果!


3.写代码来验证ColorMatrix所起的作用

这里来写烂大街的例子,一个ImageView,4 * 5个EditText,一个重置按钮和一个生成按钮,
我们来看下效果图:

依次是原图,泛黄,泛绿,泛红,高对比度,色相变换,以及黄色复古

接下来我们来写代码,完成上述的效果:
代码实现

首先是布局文件activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical"
  6. android:padding="5dp">
  7. <ImageView
  8. android:id="@+id/img_show"
  9. android:layout_width="match_parent"
  10. android:layout_height="0dp"
  11. android:layout_weight="2" />
  12. <GridLayout
  13. android:id="@+id/gp_matrix"
  14. android:layout_width="match_parent"
  15. android:layout_height="0dp"
  16. android:layout_weight="3"
  17. android:columnCount="5"
  18. android:rowCount="4"></GridLayout>
  19. <LinearLayout
  20. android:layout_width="match_parent"
  21. android:layout_height="wrap_content"
  22. android:orientation="horizontal">
  23. <Button
  24. android:id="@+id/btn_reset"
  25. android:layout_width="0dp"
  26. android:layout_height="wrap_content"
  27. android:layout_weight="1"
  28. android:text="重置" />
  29. <Button
  30. android:id="@+id/btn_Change"
  31. android:layout_width="0dp"
  32. android:layout_height="wrap_content"
  33. android:layout_weight="1"
  34. android:text="变换" />
  35. </LinearLayout>
  36. </LinearLayout>

接着是MainActivity.java

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  2. private ImageView img_show;
  3. private GridLayout gp_matrix;
  4. private Button btn_reset;
  5. private Button btn_Change;
  6. private Bitmap mBitmap;
  7. private int mEtWidth, mEtHeight;
  8. private EditText[] mEts = new EditText[20];
  9. private float[] mColorMatrix = new float[20];
  10. private Context mContext;
  11. @Override
  12. protected void onCreate(Bundle savedInstanceState) {
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.activity_main);
  15. mContext = MainActivity.this;
  16. bindViews();
  17. gp_matrix.post(new Runnable() {
  18. @Override
  19. public void run() {
  20. mEtWidth = gp_matrix.getWidth() / 5;
  21. mEtHeight = gp_matrix.getHeight() / 4;
  22. //添加5 * 4个EditText
  23. for (int i = 0; i < 20; i++) {
  24. EditText editText = new EditText(mContext);
  25. mEts[i] = editText;
  26. gp_matrix.addView(editText, mEtWidth, mEtHeight);
  27. }
  28. initMatrix();
  29. }
  30. });
  31. }
  32. private void bindViews() {
  33. img_show = (ImageView) findViewById(R.id.img_show);
  34. gp_matrix = (GridLayout) findViewById(R.id.gp_matrix);
  35. btn_reset = (Button) findViewById(R.id.btn_reset);
  36. btn_Change = (Button) findViewById(R.id.btn_Change);
  37. mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
  38. img_show.setImageBitmap(mBitmap);
  39. btn_reset.setOnClickListener(this);
  40. btn_Change.setOnClickListener(this);
  41. }
  42. //定义一个初始化颜色矩阵的方法
  43. private void initMatrix() {
  44. for (int i = 0; i < 20; i++) {
  45. if (i % 6 == 0) {
  46. mEts[i].setText(String.valueOf(1));
  47. } else {
  48. mEts[i].setText(String.valueOf(0));
  49. }
  50. }
  51. }
  52. //定义一个获取矩阵值得方法
  53. private void getMatrix() {
  54. for (int i = 0; i < 20; i++) {
  55. mColorMatrix[i] = Float.valueOf(mEts[i].getText().toString());
  56. }
  57. }
  58. //根据颜色矩阵的值来处理图片
  59. private void setImageMatrix() {
  60. Bitmap bmp = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(),
  61. Bitmap.Config.ARGB_8888);
  62. android.graphics.ColorMatrix colorMatrix = new android.graphics.ColorMatrix();
  63. colorMatrix.set(mColorMatrix);
  64. Canvas canvas = new Canvas(bmp);
  65. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  66. paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
  67. canvas.drawBitmap(mBitmap, 0, 0, paint);
  68. img_show.setImageBitmap(bmp);
  69. }
  70. @Override
  71. public void onClick(View v) {
  72. switch (v.getId()) {
  73. case R.id.btn_Change:
  74. getMatrix();
  75. setImageMatrix();
  76. break;
  77. case R.id.btn_reset:
  78. initMatrix();
  79. getMatrix();
  80. setImageMatrix();
  81. break;
  82. }
  83. }
  84. }

代码非常的简单,就加载布局,然后往GridLayout里面塞 5 * 4 个EditText,这里用
post()方法是为了保证GridLayout加载完毕后才去获取长宽,不然在获取GridLayout长
宽的时候可是获取不到值的!接着定义了三个方法,初始矩阵,获取矩阵值,以及根据
矩阵值来处理图片~是不是很简单咧~
不过到这里你可能有一点疑问

" 难道处理图像我们只能这样修改颜色矩阵么?次次都这样肯定很麻烦,谁会去记矩阵
里的应该填的值?有没有简单一点处理图片的方法? "
答:肯定是有的,我们可以看回文档,我们可以发现几个很常用的方法:
setRotate(int axis, float degrees):设置色调
setSaturation(float sat):设置饱和度
setScale(float rScale, float gScale, float bScale, float aScale):设置亮度
下面我们写个例子来试下这个三个方法!


4.使用ColorMatrix的三个方法处理图像

运行效果图

代码实现

首先我们来编写一个图片处理的工具类,我们传入Bitmap,色相,饱和度以及亮度,处理后,返回
处理后的图片:ImageHelper.java

  1. /**
  2. * Created by Jay on 2015/10/28 0028.
  3. */
  4. public class ImageHelper {
  5. /**
  6. * 该方法用来处理图像,根据色调,饱和度,亮度来调节
  7. *
  8. * @param bm:要处理的图像
  9. * @param hue:色调
  10. * @param saturation:饱和度
  11. * @param lum:亮度
  12. *
  13. */
  14. public static Bitmap handleImageEffect(Bitmap bm, float hue, float saturation, float lum) {
  15. Bitmap bmp = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), Bitmap.Config.ARGB_8888);
  16. Canvas canvas = new Canvas(bmp);
  17. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  18. ColorMatrix hueMatrix = new ColorMatrix();
  19. hueMatrix.setRotate(0, hue); //0代表R,红色
  20. hueMatrix.setRotate(1, hue); //1代表G,绿色
  21. hueMatrix.setRotate(2, hue); //2代表B,蓝色
  22. ColorMatrix saturationMatrix = new ColorMatrix();
  23. saturationMatrix.setSaturation(saturation);
  24. ColorMatrix lumMatrix = new ColorMatrix();
  25. lumMatrix.setScale(lum, lum, lum, 1);
  26. ColorMatrix imageMatrix = new ColorMatrix();
  27. imageMatrix.postConcat(hueMatrix);
  28. imageMatrix.postConcat(saturationMatrix);
  29. imageMatrix.postConcat(lumMatrix);
  30. paint.setColorFilter(new ColorMatrixColorFilter(imageMatrix));
  31. canvas.drawBitmap(bm, 0, 0, paint);
  32. return bmp;
  33. }
  34. }

接下来我们把布局也撸出来,activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical"
  6. android:padding="5dp">
  7. <ImageView
  8. android:id="@+id/img_meizi"
  9. android:layout_width="300dp"
  10. android:layout_height="300dp"
  11. android:layout_centerHorizontal="true"
  12. android:layout_marginBottom="24dp"
  13. android:layout_marginTop="24dp" />
  14. <TextView
  15. android:id="@+id/txt_hue"
  16. android:layout_width="wrap_content"
  17. android:layout_height="32dp"
  18. android:layout_below="@id/img_meizi"
  19. android:gravity="center"
  20. android:text="色调 :"
  21. android:textSize="18sp" />
  22. <SeekBar
  23. android:id="@+id/sb_hue"
  24. android:layout_width="match_parent"
  25. android:layout_height="32dp"
  26. android:layout_below="@id/img_meizi"
  27. android:layout_toRightOf="@id/txt_hue" />
  28. <TextView
  29. android:id="@+id/txt_saturation"
  30. android:layout_width="wrap_content"
  31. android:layout_height="32dp"
  32. android:layout_below="@id/txt_hue"
  33. android:gravity="center"
  34. android:text="饱和度:"
  35. android:textSize="18sp" />
  36. <SeekBar
  37. android:id="@+id/sb_saturation"
  38. android:layout_width="match_parent"
  39. android:layout_height="32dp"
  40. android:layout_below="@id/sb_hue"
  41. android:layout_toRightOf="@id/txt_saturation" />
  42. <TextView
  43. android:id="@+id/txt_lun"
  44. android:layout_width="wrap_content"
  45. android:layout_height="32dp"
  46. android:layout_below="@id/txt_saturation"
  47. android:gravity="center"
  48. android:text="亮度 :"
  49. android:textSize="18sp" />
  50. <SeekBar
  51. android:id="@+id/sb_lum"
  52. android:layout_width="match_parent"
  53. android:layout_height="32dp"
  54. android:layout_below="@id/sb_saturation"
  55. android:layout_toRightOf="@id/txt_lun" />
  56. </RelativeLayout>

最后是我们的MainActivity.java

  1. public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener{
  2. private ImageView img_meizi;
  3. private SeekBar sb_hue;
  4. private SeekBar sb_saturation;
  5. private SeekBar sb_lum;
  6. private final static int MAX_VALUE = 255;
  7. private final static int MID_VALUE = 127;
  8. private float mHue = 0.0f;
  9. private float mStauration = 1.0f;
  10. private float mLum = 1.0f;
  11. private Bitmap mBitmap;
  12. @Override
  13. protected void onCreate(Bundle savedInstanceState) {
  14. super.onCreate(savedInstanceState);
  15. setContentView(R.layout.activity_main);
  16. mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
  17. bindViews();
  18. }
  19. private void bindViews() {
  20. img_meizi = (ImageView) findViewById(R.id.img_meizi);
  21. sb_hue = (SeekBar) findViewById(R.id.sb_hue);
  22. sb_saturation = (SeekBar) findViewById(R.id.sb_saturation);
  23. sb_lum = (SeekBar) findViewById(R.id.sb_lum);
  24. img_meizi.setImageBitmap(mBitmap);
  25. sb_hue.setMax(MAX_VALUE);
  26. sb_hue.setProgress(MID_VALUE);
  27. sb_saturation.setMax(MAX_VALUE);
  28. sb_saturation.setProgress(MID_VALUE);
  29. sb_lum.setMax(MAX_VALUE);
  30. sb_lum.setProgress(MID_VALUE);
  31. sb_hue.setOnSeekBarChangeListener(this);
  32. sb_saturation.setOnSeekBarChangeListener(this);
  33. sb_lum.setOnSeekBarChangeListener(this);
  34. }
  35. @Override
  36. public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  37. switch (seekBar.getId()) {
  38. case R.id.sb_hue:
  39. mHue = (progress - MID_VALUE) * 1.0F / MID_VALUE * 180;
  40. break;
  41. case R.id.sb_saturation:
  42. mStauration = progress * 1.0F / MID_VALUE;
  43. break;
  44. case R.id.sb_lum:
  45. mLum = progress * 1.0F / MID_VALUE;
  46. break;
  47. }
  48. img_meizi.setImageBitmap(ImageHelper.handleImageEffect(mBitmap, mHue, mStauration, mLum));
  49. }
  50. @Override
  51. public void onStartTrackingTouch(SeekBar seekBar) {}
  52. @Override
  53. public void onStopTrackingTouch(SeekBar seekBar) {}
  54. }

代码同样很简单,这里就不讲解了~


5.本节代码示例下载:

ColorMatrixDemo.zip
ColorMatrixDemo2.zip


本节小结:

好的,本节跟大家介绍了ColorFilter中的第一个ColorMatrixColorFilter,颜色矩阵过滤器
其实核心还是ColorMatrix,我们通过该类处理图片可以自己设置4*5矩阵的值,又或者直接调用
ColorMatrix给我们提供的设置色调,饱和度,亮度的方法!图像处理无非就这样,还有一种是修改
像素点形式的,后面也会讲,本节内容参考自——医生(徐宜生)的慕客网视频:
Android图像处理-打造美图秀秀从它开始,不想看文字的可以看视频,讲得还是蛮赞的~

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注