利用顏色矩陣實現圖片效果

      在上一篇文章中，我們學習利用色光三原色調整圖片顏色的方法。這一篇文章的代碼將在上一篇的基礎上繼續書寫。如果你還沒讀過，可以點擊下面的鏈接：

http://www.cnblogs.com/fuly550871915/p/4883422.html

      在本篇中，我們繼續學習圖片顏色的變換方法，利用顏色矩陣將更加細致的調整圖片顏色。其實顏色矩陣變換是圖片顏色變化的基礎原理。在下面我們將詳細說一說。

 

一、基礎知識

       在用色光三原色來變換圖片顏色中，涉及到一個類ColorMatrix，也就是顏色矩陣的意思。而android中圖像顏色處理的原理就是用一個4*5的數值矩陣來與圖片中每一個像素點相乘，即與每一個顏色值相乘從而得到新的顏色的。我們看下面的一張圖片

 

      這張圖片說的就是顏色處理的原理。其中的矩陣A就是我們的顏色矩陣，是一個數值矩陣，每一個值都在0—255之間。而C是一個5*1的向量，即時圖片上的每一個像素點（也就是顏色值）。當A*C時，由線性代數的知識，就得到一個新的4*1的向量。仔細觀察右邊的計算公式，新的向量的四個元素其實就是新的顏色分量值：紅，綠，藍，透明度。至於原始的向量是5*1，最后一個元素為什么是1，這這只是android設置的一個偏移量而已，不用管它。那么我怎么改變顏色呢？其實我們要做的很簡單，就是設定顏色矩陣A的每一個值即可。那么當A的初始化值我多少呢，即A怎么設置，可以將圖片還原為以前的顏色呢（或者說是不會改變顏色）。學過線代就會知道，其實很簡單，只要能夠保證C的值變即可。那么A應該設置為，如下：

         好了，基本基礎知識你都知道了。也許你還是很困惑，怎么使用顏色矩陣呢？其實思路跟利用色光三元色改變圖片效果的方法是一樣的。我們通過ColorMatrxi的set方法，將一個長度為20的數值數組傳給它，就可以實現顏色矩陣A的設定了。然后同樣，利用這個設定好的顏色矩陣來設置畫筆，最后用畫筆根據我們原來的圖片畫一張只改變了顏色的圖片即可。我們來看具體的一個實現方法吧，代碼如下，注釋很詳細，我就不多解釋了。

/*
     * 用來根據顏色矩陣處理圖片的顏色
     */
    private void setImage(){
        Bitmap bmp = Bitmap.createBitmap(priBmp.getWidth(), priBmp.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bmp);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗鋸齒設置
        
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.set(mColorMatrix);//注意這一步是核心，將顏色矩陣設置為我們的顏色矩陣
        //根據顏色矩陣獲得一支這樣的畫筆
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        //然后利用設置好的顏色畫筆將原圖畫到新的bmp上
        canvas.drawBitmap(priBmp, 0, 0, paint);
        
        img.setImageBitmap(bmp);//注意這一步，我們將圖片顯示在ImageView上了
    }

      需要說明的是，其中img是一個ImageView，priBmp是原來的Bitmap圖片，mColorMatrxi是一個長度為20的數值數組。其實上面的代碼就是截取我們下面的實戰里面的，所以你看不到它們的初始化。那么下面我們快快進入實戰吧。

 

二、實戰

       我們的實戰代碼在上一篇用三原色改變顏色效果的基礎上繼續編寫。在上一篇中我們再MainActivity中顯示了三個按鈕，現在我們就來實現第二個按鈕”調整顏色矩陣“。首先編寫color2.xml用來顯示利用顏色矩陣調整的圖片。這里面用到了一個Gridlayout布局，相信大家都不陌生吧，我就不多說了。代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 <ImageView 
     android:id="@+id/img_color"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_weight="2"/>
 <GridLayout 
     android:id="@+id/glay"
     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_change"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:onClick="btnChange"
         android:text="改變"/>
     <Button
         android:id="@+id/btn_ret"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="btnRet"
         android:text="恢復"/>
 </LinearLayout>
 
 
   

</LinearLayout>

      我們發現在這個布局中，上放置了一個ImageView用來顯示圖片，下面是一個4*5的GridLayout，其實就是來設置顏色矩陣的，對應於顏色矩陣4*5。最下面是兩個按鈕，一個”改變“按鈕，用來改變顏色，一個”恢復“按鈕，用來恢復圖片顏色。

    然后，再新建”ColorMatrixActivity“，用來顯示我們這個布局，處理相應的邏輯。注釋很詳細了，如下：

package com.fuly.image;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.GridLayout;
import android.widget.ImageView;

public class ColorMatrixActivity extends Activity{
    
    private ImageView img;
    private GridLayout mGrid;
    private Bitmap priBmp;
    
    private int mEtWidth;//每一個小編輯框的寬度
    private int mEtHeight;//每一個小編輯框的高度
    
    private EditText[] mEts = new EditText[20];//用來存儲編輯框
    private float[] mColorMatrix = new float[20];//用來存儲編輯框中的值
    
    
    

    protected void onCreate(Bundle savedInstanceState) {
        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.color2);
        priBmp = BitmapFactory.decodeResource(getResources(), R.drawable.test1);
        
        img = (ImageView) findViewById(R.id.img_color);
        mGrid = (GridLayout) findViewById(R.id.glay);
        img.setImageBitmap(priBmp);
        
        //當mGrid被畫出來之后就會調用這個方法
        mGrid.post(new Runnable(){

            public void run() {
                
                mEtWidth = mGrid.getWidth()/5;
                mEtHeight = mGrid.getHeight()/4;
                
                initGrid();
                initMatrix();
            }
            
        });
    }
    /*
     * 初始化mGrid，將小的編輯框添加進去
     */
    private void initGrid(){
        
        for(int i=0;i<20;i++){
            EditText et = new EditText(this);
            mGrid.addView(et,mEtWidth,mEtHeight);
            
            mEts[i] = et;
            
        }
    }
    /*
     * 初始化矩陣，即mGrid中的那些小編輯框
     */
    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));
            }
        }
    }
    /*
     * 用來獲取編輯框中的值
     */
    private void getMatrix(){
        for(int i=0;i<20;i++){
            mColorMatrix[i]=Float.valueOf(mEts[i].getText().toString());
        }
    }
    /*
     * 用來根據顏色矩陣處理圖片的顏色
     */
    private void setImage(){
        Bitmap bmp = Bitmap.createBitmap(priBmp.getWidth(), priBmp.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bmp);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗鋸齒設置
        
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.set(mColorMatrix);//注意這一步是核心，將顏色矩陣設置為我們的顏色矩陣
        //根據顏色矩陣獲得一支這樣的畫筆
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        //然后利用設置好的顏色畫筆將原圖畫到新的bmp上
        canvas.drawBitmap(priBmp, 0, 0, paint);
        
        img.setImageBitmap(bmp);//注意這一步，我們將圖片顯示在ImageView上了
    }

    /**
     * 改變按鈕的監聽事件
     */
    public void btnChange(View view){
        
        getMatrix();
        setImage();
    }
    /*
     * 恢復按鈕的監聽事件
     */
    public void btnRet(View view){
        initMatrix();
        getMatrix();
        setImage();
        
    }
}

      在這里，我們可以看到將顏色矩陣初始化為了只包含1和0的矩陣，就是前面我們所講的用來恢復圖片顏色的矩陣。后面的那個setImage方法就是之前我們所貼出來的改變顏色的那個方法。代碼邏輯很簡單，不多說了。

      最后不要忘記注冊這個活動，還要修改MainActivity中的代碼如下：

package com.fuly.image;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.app.Activity;
import android.content.Intent;

public class MainActivity extends Activity {
    
    private Button btn1;

  
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        btn1 = (Button) findViewById(R.id.bnt_imgcolor1);
        
    }

    /*
     * btn1的點擊事件
     */
      public void preferenceClick(View view){
          
          Intent intent = new Intent(this,ColorAdjustActivity.class);
          startActivity(intent);
          
          
      }
      /*
       * btn2的點擊事件
       */
        public void matrixClick(View view){
            
            Intent intent = new Intent(this,ColorMatrixActivity.class);
            startActivity(intent);
           
        }
)

         好了，我們運行程序，點擊第二個按鈕，實現的效果如下：

                                

    點擊按鈕，跳轉后為第一張效果，然后設置值並點擊”改變“是第二張的效果，然后點擊恢復是第三張效果。

 

     這樣子，是不是很直觀啊。不知道用顏色矩陣來處理圖片顏色你掌握了沒有。下面我們就來實現最后一個按鈕”調整色素“，即通過調整色素來實現顏色的改變。在下面的這篇文章中，我們將實現負片效果，浮雕效果，老照片效果，有意思吧，快來學習吧。