Paint API之—— ColorFilter(顏色過(guò)濾器)(1/3)
本節(jié)引言：
上節(jié)我們學(xué)習(xí)了MaskFilter(面具)，用它的兩個(gè)子類BlurMaskFilter弄了下模糊效果，EmbossMaskFilter 弄了下浮雕效果，而本節(jié)我們來(lái)學(xué)習(xí)的是另一個(gè)API——ColorFilter(顏色過(guò)濾器)，和MaskFilter一樣， 我們并不直接使用該類，而是使用該類的三個(gè)子類：
顏色矩陣顏色過(guò)濾器：ColorMatrixColorFilter
光照色彩過(guò)濾器：LightingColorFilter
混排顏色過(guò)濾器濾器PorterDuffColorFilter
本節(jié)我們就來(lái)學(xué)習(xí)下第一個(gè)ColorMatrixColorFilter的使用吧，打開(kāi)ColorMatrixColorFilter的文檔，
大概說(shuō)的是：通過(guò)一個(gè)4 x 5的顏色矩陣來(lái)變換顏色，可以修改像素的飽和度，將YUV轉(zhuǎn)換成RGB等！ 而構(gòu)造方法中的ColorMatrix就是顏色矩陣，也是我們學(xué)習(xí)的核心，下面聽(tīng)我一一道來(lái)！
1.相關(guān)常識(shí)的普及：
RGBA模型：
RGBA不知道你聽(tīng)過(guò)沒(méi)，黃綠藍(lán)知道了吧，光的三基色，而RAGB則是在此的基礎(chǔ)上多了一個(gè)透明度！R(Red紅色)，G(Green綠色)，B(Blue藍(lán)色)，A(Alpha透明度)；另外要和顏料的三 原色區(qū)分開(kāi)來(lái)哦，最明顯的區(qū)別就是顏料的三原色中用黃色替換了光三基色中的綠色！知道下就好， 有興趣的可自行百度~
一些名詞：
色調(diào)/色相——物體傳遞的顏色
飽和度——顏色的純度，從0(灰)到100%(飽和)來(lái)進(jìn)行描述
亮度/明度——顏色的相對(duì)明暗程度
2.ColorMatrix的解讀
如題，顏色矩陣(4 * 5)，我們可以修改矩陣中的值，來(lái)實(shí)現(xiàn)黑白照，泛黃老照片，高對(duì)比度等效果！ 手撕顏色矩陣解釋圖如下：
不知道你看懂上圖沒(méi)，如果你學(xué)過(guò)高數(shù)的話，肯定對(duì)此很熟悉，無(wú)非是矩陣的叉乘而已，沒(méi)學(xué)過(guò)也沒(méi)關(guān)系 計(jì)算方法就是右下角那個(gè)，拿顏色矩陣的每一行來(lái) * 顏色矩陣分量的每一列！
很典型的一個(gè)例子，處理前后的結(jié)果比較，我們還可以讓某個(gè)顏色值 * 一個(gè)常數(shù)，比如讓第三行(藍(lán)) 乘以2，效果就變成泛藍(lán)色了，當(dāng)然，我們肯定要寫(xiě)代碼來(lái)驗(yàn)證驗(yàn)證上面的結(jié)果！
3.寫(xiě)代碼來(lái)驗(yàn)證ColorMatrix所起的作用
這里來(lái)寫(xiě)爛大街的例子，一個(gè)ImageView，4 * 5個(gè)EditText，一個(gè)重置按鈕和一個(gè)生成按鈕， 我們來(lái)看下效果圖：
依次是原圖，泛黃，泛綠，泛紅，高對(duì)比度，色相變換，以及黃色復(fù)古
接下來(lái)我們來(lái)寫(xiě)代碼，完成上述的效果：代碼實(shí)現(xiàn)：
首先是布局文件activity_main.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:orientation="vertical" android:padding="5dp"> <ImageView android:id="@+id/img_show" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" /> <GridLayout android:id="@+id/gp_matrix" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="3" android:columnCount="5" android:rowCount="4"></GridLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/btn_reset" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="重置" /> <Button android:id="@+id/btn_Change" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="變換" /> </LinearLayout></LinearLayout>
接著是MainActivity.java：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ImageView img_show;
private GridLayout gp_matrix;
private Button btn_reset;
private Button btn_Change;
private Bitmap mBitmap;
private int mEtWidth, mEtHeight;
private EditText[] mEts = new EditText[20];
private float[] mColorMatrix = new float[20];
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = MainActivity.this;
bindViews();
gp_matrix.post(new Runnable() {
@Override
public void run() {
mEtWidth = gp_matrix.getWidth() / 5;
mEtHeight = gp_matrix.getHeight() / 4;
//添加5 * 4個(gè)EditText
for (int i = 0; i < 20; i++) {
EditText editText = new EditText(mContext);
mEts[i] = editText;
gp_matrix.addView(editText, mEtWidth, mEtHeight);
}
initMatrix();
}
});
}
private void bindViews() {
img_show = (ImageView) findViewById(R.id.img_show);
gp_matrix = (GridLayout) findViewById(R.id.gp_matrix);
btn_reset = (Button) findViewById(R.id.btn_reset);
btn_Change = (Button) findViewById(R.id.btn_Change);
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
img_show.setImageBitmap(mBitmap);
btn_reset.setOnClickListener(this);
btn_Change.setOnClickListener(this);
}
//定義一個(gè)初始化顏色矩陣的方法
private void initMatrix() {
for (int i = 0; i < 20; i++) {
if (i % 6 == 0) {
mEts[i].setText(String.valueOf(1));
} else {
mEts[i].setText(String.valueOf(0));
}
}
}
//定義一個(gè)獲取矩陣值得方法
private void getMatrix() {
for (int i = 0; i < 20; i++) {
mColorMatrix[i] = Float.valueOf(mEts[i].getText().toString());
}
}
//根據(jù)顏色矩陣的值來(lái)處理圖片
private void setImageMatrix() {
Bitmap bmp = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(),
Bitmap.Config.ARGB_8888);
android.graphics.ColorMatrix colorMatrix = new android.graphics.ColorMatrix();
colorMatrix.set(mColorMatrix);
Canvas canvas = new Canvas(bmp);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(mBitmap, 0, 0, paint);
img_show.setImageBitmap(bmp);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_Change:
getMatrix();
setImageMatrix();
break;
case R.id.btn_reset:
initMatrix();
getMatrix();
setImageMatrix();
break;
}
}
}代碼非常的簡(jiǎn)單，就加載布局，然后往GridLayout里面塞 5 * 4 個(gè)EditText，這里用 post()方法是為了保證GridLayout加載完畢后才去獲取長(zhǎng)寬，不然在獲取GridLayout長(zhǎng) 寬的時(shí)候可是獲取不到值的！接著定義了三個(gè)方法，初始矩陣，獲取矩陣值，以及根據(jù) 矩陣值來(lái)處理圖片~是不是很簡(jiǎn)單咧~
不過(guò)到這里你可能有一點(diǎn)疑問(wèn)：
" 難道處理圖像我們只能這樣修改顏色矩陣么？次次都這樣肯定很麻煩，誰(shuí)會(huì)去記矩陣 里的應(yīng)該填的值？有沒(méi)有簡(jiǎn)單一點(diǎn)處理圖片的方法？ "
答：肯定是有的，我們可以看回文檔，我們可以發(fā)現(xiàn)幾個(gè)很常用的方法：setRotate(int axis, float degrees)：設(shè)置色調(diào)
setSaturation(float sat)：設(shè)置飽和度
setScale(float rScale, float gScale, float bScale, float aScale)：設(shè)置亮度
下面我們寫(xiě)個(gè)例子來(lái)試下這個(gè)三個(gè)方法！
4.使用ColorMatrix的三個(gè)方法處理圖像
運(yùn)行效果圖：
代碼實(shí)現(xiàn)：
首先我們來(lái)編寫(xiě)一個(gè)圖片處理的工具類，我們傳入Bitmap，色相，飽和度以及亮度，處理后，返回 處理后的圖片：ImageHelper.java：
/**
* Created by Jay on 2015/10/28 0028.
*/
public class ImageHelper {
/**
* 該方法用來(lái)處理圖像，根據(jù)色調(diào)，飽和度，亮度來(lái)調(diào)節(jié)
*
* @param bm:要處理的圖像
* @param hue:色調(diào)
* @param saturation:飽和度
* @param lum:亮度
*
*/
public static Bitmap handleImageEffect(Bitmap bm, float hue, float saturation, float lum) {
Bitmap bmp = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
ColorMatrix hueMatrix = new ColorMatrix();
hueMatrix.setRotate(0, hue); //0代表R，紅色
hueMatrix.setRotate(1, hue); //1代表G，綠色
hueMatrix.setRotate(2, hue); //2代表B，藍(lán)色
ColorMatrix saturationMatrix = new ColorMatrix();
saturationMatrix.setSaturation(saturation);
ColorMatrix lumMatrix = new ColorMatrix();
lumMatrix.setScale(lum, lum, lum, 1);
ColorMatrix imageMatrix = new ColorMatrix();
imageMatrix.postConcat(hueMatrix);
imageMatrix.postConcat(saturationMatrix);
imageMatrix.postConcat(lumMatrix);
paint.setColorFilter(new ColorMatrixColorFilter(imageMatrix));
canvas.drawBitmap(bm, 0, 0, paint);
return bmp;
}
}接下來(lái)我們把布局也擼出來(lái)，activity_main.xml：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="5dp"> <ImageView android:id="@+id/img_meizi" android:layout_width="300dp" android:layout_height="300dp" android:layout_centerHorizontal="true" android:layout_marginBottom="24dp" android:layout_marginTop="24dp" /> <TextView android:id="@+id/txt_hue" android:layout_width="wrap_content" android:layout_height="32dp" android:layout_below="@id/img_meizi" android:gravity="center" android:text="色調(diào) :" android:textSize="18sp" /> <SeekBar android:id="@+id/sb_hue" android:layout_width="match_parent" android:layout_height="32dp" android:layout_below="@id/img_meizi" android:layout_toRightOf="@id/txt_hue" /> <TextView android:id="@+id/txt_saturation" android:layout_width="wrap_content" android:layout_height="32dp" android:layout_below="@id/txt_hue" android:gravity="center" android:text="飽和度:" android:textSize="18sp" /> <SeekBar android:id="@+id/sb_saturation" android:layout_width="match_parent" android:layout_height="32dp" android:layout_below="@id/sb_hue" android:layout_toRightOf="@id/txt_saturation" /> <TextView android:id="@+id/txt_lun" android:layout_width="wrap_content" android:layout_height="32dp" android:layout_below="@id/txt_saturation" android:gravity="center" android:text="亮度 :" android:textSize="18sp" /> <SeekBar android:id="@+id/sb_lum" android:layout_width="match_parent" android:layout_height="32dp" android:layout_below="@id/sb_saturation" android:layout_toRightOf="@id/txt_lun" /></RelativeLayout>
最后是我們的MainActivity.java：
public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener{
private ImageView img_meizi;
private SeekBar sb_hue;
private SeekBar sb_saturation;
private SeekBar sb_lum;
private final static int MAX_VALUE = 255;
private final static int MID_VALUE = 127;
private float mHue = 0.0f;
private float mStauration = 1.0f;
private float mLum = 1.0f;
private Bitmap mBitmap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
bindViews();
}
private void bindViews() {
img_meizi = (ImageView) findViewById(R.id.img_meizi);
sb_hue = (SeekBar) findViewById(R.id.sb_hue);
sb_saturation = (SeekBar) findViewById(R.id.sb_saturation);
sb_lum = (SeekBar) findViewById(R.id.sb_lum);
img_meizi.setImageBitmap(mBitmap);
sb_hue.setMax(MAX_VALUE);
sb_hue.setProgress(MID_VALUE);
sb_saturation.setMax(MAX_VALUE);
sb_saturation.setProgress(MID_VALUE);
sb_lum.setMax(MAX_VALUE);
sb_lum.setProgress(MID_VALUE);
sb_hue.setOnSeekBarChangeListener(this);
sb_saturation.setOnSeekBarChangeListener(this);
sb_lum.setOnSeekBarChangeListener(this);
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
switch (seekBar.getId()) {
case R.id.sb_hue:
mHue = (progress - MID_VALUE) * 1.0F / MID_VALUE * 180;
break;
case R.id.sb_saturation:
mStauration = progress * 1.0F / MID_VALUE;
break;
case R.id.sb_lum:
mLum = progress * 1.0F / MID_VALUE;
break;
}
img_meizi.setImageBitmap(ImageHelper.handleImageEffect(mBitmap, mHue, mStauration, mLum));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
}代碼同樣很簡(jiǎn)單，這里就不講解了~
5.本節(jié)代碼示例下載：
本節(jié)小結(jié)：
好的，本節(jié)跟大家介紹了ColorFilter中的第一個(gè)ColorMatrixColorFilter，顏色矩陣過(guò)濾器 其實(shí)核心還是ColorMatrix，我們通過(guò)該類處理圖片可以自己設(shè)置4*5矩陣的值，又或者直接調(diào)用 ColorMatrix給我們提供的設(shè)置色調(diào)，飽和度，亮度的方法！圖像處理無(wú)非就這樣，還有一種是修改 像素點(diǎn)形式的，后面也會(huì)講，本節(jié)內(nèi)容參考自——醫(yī)生(徐宜生)的慕客網(wǎng)視頻：Android圖像處理-打造美圖秀秀從它開(kāi)始，不想看文字的可以看視頻，講得還是蠻贊的~