Android 图片特效（一）：色相、饱和度与亮度

　


　　平时的图片在使用了美图秀秀之后就会呈现不一样的效果，就像上面的图片展示的那样（上图是一张美图秀秀的使用截图）。实际上上面的效果离不开色彩的三要素——色相、饱和度和亮度。人眼看到的任一彩色光都是这三个特性的综合效果。其中色调与光波的波长有直接关系，亮度和饱和度与光波的幅度有关。简单总结一下：

　　

1，色相：色相通俗的说就是“颜色”，色相的改变就是颜色的改变，色相的调节伴随着红橙黄绿蓝紫的变化。

2，明度：明度通俗的说就是“光照度”，明度的改变就是光照在物体上带来的改变，明度的调节伴随着越高，光越强，越泛白（就像过曝一样，往白色上偏离）；越低，光越弱，越往黑里偏

3，饱和度：饱和度通俗的说就是“色彩的纯度”，饱和度的改变会影响颜色的鲜艳程度，以红色为例子，越高，越接近红色，越低则越接近灰色（黑白）

　　在理解了色彩的三元素之后就可以通过他们三个对图片进行处理了！要实现的效果图如下：

　　

一、色相、饱和度、亮度

色相

要实现对图片色相的处理，我们需要一个ColorMatrix（颜色矩阵），通过颜色矩阵的setRotate来对该颜色矩阵进行设置。

ColorMatrix huematrix=new ColorMatrix();
huematrix.setRotate(0,hue);//参数0表示R，对红色进行设置数值
//hue为设置数值，这里用了相同的三个值
huematrix.setRotate(1,hue);//参数1表示G，对绿色进行设置数值
huematrix.setRotate(2, hue);//参数2表示B，对蓝色进行设置数值

饱和度

//创建颜色矩阵，设置饱和度
ColorMatrix saturationmatrix=new ColorMatrix();
saturationmatrix.setSaturation(saturation);

亮度

ColorMatrix lummatrix=new ColorMatrix();
//参数：rscale gscale bscale （设置了三个相同的数值）透明度（完全显示）
lummatrix.setScale(lum,lum,lum,1);

色彩三元素综合作用

要想将色彩三元素综合运用到一张图片上还需要创建一个ColorMatrix矩阵，通过颜色矩阵的postConcat属性将三元素进行综合。

ColorMatrix imagematrix=new ColorMatrix();
imagematrix.postConcat(huematrix);
imagematrix.postConcat(saturationmatrix);
imagematrix.postConcat(lummatrix);

二、代码实现

思路

1、布局很简单就是ImageView+三个SeekBar

2、创建图片的处理类ImageOperation，在此类中进行对Bitmap图片的处理，在MainActivity中为imageView动态添加Bitmap。

ps：在图片的处理类ImageOperation中，传入图片Bitmap，由于传入的图片默认是不可更改的，需要我们重新创建新的Bitmap，处理完图片后返回新建的Bitmap即可。

代码

布局不再进行展示

public class ImageOperation {
//传入需要修改的Bitmap和色彩三元素
public static Bitmap imageoperation (Bitmap mbitmap ,float hue,float saturation,float lum){
//传入的Bitmap默认不可修改，需啊哟创建新的Bitmap
Bitmap mbitmap_fu=Bitmap.createBitmap(mbitmap.getWidth(),mbitmap.getHeight(), Bitmap.Config.ARGB_8888);
//创建画布，在新的bitmap上绘制
Canvas canvas=new Canvas(mbitmap_fu);
//设置画笔抗锯齿，后面在Bitmap上绘制需要使用到画笔
Paint mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);

ColorMatrix huematrix=new ColorMatrix();
huematrix.setRotate(0,hue);
huematrix.setRotate(1,hue);
huematrix.setRotate(2, hue);

ColorMatrix saturationmatrix=new ColorMatrix();
saturationmatrix.setSaturation(saturation);

ColorMatrix lummatrix=new ColorMatrix();
//参数：rscale gscale bscale 透明度
lummatrix.setScale(lum,lum,lum,1);

ColorMatrix imagematrix=new ColorMatrix();
imagematrix.postConcat(huematrix);
imagematrix.postConcat(saturationmatrix);
imagematrix.postConcat(lummatrix);
//通过画笔的setColorFilter进行设置
mpaint.setColorFilter(new ColorMatrixColorFilter(imagematrix));
canvas.drawBitmap(mbitmap,0,0,mpaint);
return mbitmap_fu;
}
}

MainActivity

public class MainActivity extends Activity implements SeekBar.OnSeekBarChangeListener{
private SeekBar mseekbar_hue;
private SeekBar mseekbar_lum;
private SeekBar mseekbar_saturation;
private ImageView imageView;
private float mhue,msaturation,mlum;
private static int MID_VALUE=127;
private Bitmap mbitmap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mbitmap= BitmapFactory.decodeResource(getResources(), R.mipmap.tu);
mseekbar_hue= (SeekBar) findViewById(R.id.seekBar);
mseekbar_saturation= (SeekBar) findViewById(R.id.seekBar1);
mseekbar_lum= (SeekBar) findViewById(R.id.seekBar2);
imageView= (ImageView) findViewById(R.id.image);
imageView.setImageBitmap(mbitmap);
//对SeekBar设置最大值与初始值
mseekbar_hue.setMax(255);
mseekbar_hue.setProgress(MID_VALUE);
//对seekbar的改变就行监听
mseekbar_hue.setOnSeekBarChangeListener(this);
mseekbar_saturation.setMax(255);
mseekbar_saturation.setProgress(MID_VALUE);
mseekbar_saturation.setOnSeekBarChangeListener(this);
mseekbar_lum.setMax(255);
mseekbar_lum.setProgress(MID_VALUE);
mseekbar_lum.setOnSeekBarChangeListener(this);

}

//监听Seekbar的变化
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
switch (seekBar.getId()){
case R.id.seekBar:
//这里给出的是一个加经验值
mhue=(progress-MID_VALUE)*1.0f/255*180;
break;
case R.id.seekBar1:

msaturation=progress*1.0f/MID_VALUE;
break;
case R.id.seekBar2:
mlum=progress*1.0f/MID_VALUE;
break;

}
imageView.setImageBitmap(ImageOperation.imageoperation(mbitmap, mhue, msaturation, mlum));

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
}