色彩處理

通過色彩矩陣處理

色彩矩陣介紹

圖像的RGBA可拆分為一個4行5列的矩陣和5行1列矩陣相乘

其中4行5列矩陣即為ColorMatrix，可通過調(diào)整ColorMatrix間接調(diào)整RGBA

• 第一行 abcde 決定新的 R
• 第二行 fghij 決定新的 G
• 第三行 klmno 決定新的 G
• 第四行 pqrst 決定新的 A
• ColorMatrix第五列 ejot 決定offset

當(dāng)?shù)谝恍衋=1，b=c=d=e=0時，R=R1，即紅色保持不變

其他行以此類推，可得到如下初始顏色矩陣（即圖片最開始的顏色）

當(dāng)要改變顏色值時，可通過

• 修改offset
• 修改ColorMatrix

利用API修改

描述圖像，可通過

• 色調(diào)：物體傳播的顏色
• 飽和度：顏色的純度，0到100%
• 亮度：顏色的相對明暗程度

調(diào)整色調(diào)可通過如下，第一個參數(shù)0-1-2代表RGB，第二個參數(shù)為具體值

float hue = 0.5f;
ColorMatrix hueMatrix = new ColorMatrix();
hueMatrix.setRotate(0, hue);
hueMatrix.setRotate(1, hue);
hueMatrix.setRotate(2, hue);

調(diào)整飽和度可通過如下，為0時變成灰度圖像

float saturation = 0.5f;
ColorMatrix saturationMatrix = new ColorMatrix();
saturationMatrix.setSaturation(saturation);

調(diào)整亮度通過三原色以相同比例進(jìn)行混合，就會顯示白色

float lum = 0.5f;
ColorMatrix lumMatrix = new ColorMatrix();
lumMatrix.setScale(lum, lum, lum, 1);

除此之外，還可以通過矩陣運(yùn)算，將上面效果進(jìn)行疊加

ColorMatrix imageMatrix = new ColorMatrix();
imageMatrix.postConcat(hueMatrix);
imageMatrix.postConcat(saturationMatrix);
imageMatrix.postConcat(lumMatrix);

下面為實(shí)例，設(shè)置三個進(jìn)度條分別修改Hum、Saturation、Lum

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {private ImageView imageView;private Bitmap bitmap;private SeekBar seekBarHue, seekBarSaturation, seekBarLum;private float mHue;private float mSaturation;private float mLum;private final int MID_VALUE = 50;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imageView = (ImageView) findViewById(R.id.iv);seekBarHue = (SeekBar) findViewById(R.id.seek_bar_hue);seekBarSaturation = (SeekBar) findViewById(R.id.seek_bar_saturation);seekBarLum = (SeekBar) findViewById(R.id.seek_bar_Lum);seekBarHue.setProgress(MID_VALUE);seekBarSaturation.setProgress(MID_VALUE);seekBarLum.setProgress(MID_VALUE);//將圖片轉(zhuǎn)化為Bitmap設(shè)置到ImageViewbitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a);imageView.setImageBitmap(bitmap);seekBarHue.setOnSeekBarChangeListener(this);seekBarSaturation.setOnSeekBarChangeListener(this);seekBarLum.setOnSeekBarChangeListener(this);}private Bitmap handleImage(Bitmap bm, float hue, float saturation, float lum) {//不允許修改原圖的bitmap，創(chuàng)建bitmap副本，通過修改副本間接修改圖像Bitmap bmp = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bmp);Paint paint = new Paint();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();lumMatrix.setScale(lum, lum, lum, 1);ColorMatrix colorMatrix = new ColorMatrix();colorMatrix.postConcat(hueMatrix);colorMatrix.postConcat(saturationMatrix);colorMatrix.postConcat(lumMatrix);//通過setColorFilter設(shè)置ColorMatrix，并將副本返回設(shè)置到ImageViewpaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));canvas.drawBitmap(bm, 0, 0, paint);return bmp;}@Overridepublic void onProgressChanged(SeekBar bar, int progress, boolean fromUser) {switch (bar.getId()) {case R.id.seek_bar_hue:mHue = (progress - MID_VALUE) * 1.0F / MID_VALUE * 180;Log.d("song", "onProgressChanged: mHue = " + mHue);break;case R.id.seek_bar_saturation:mSaturation = progress * 1.0F / MID_VALUE;break;case R.id.seek_bar_Lum:mLum = progress * 1.0F / MID_VALUE;break;default:break;}imageView.setImageBitmap(handleImage(bitmap, mHue, mSaturation, mLum));}@Overridepublic void onStartTrackingTouch(SeekBar arg0) {// TODO Auto-generated method stub}@Overridepublic void onStopTrackingTouch(SeekBar arg0) {// TODO Auto-generated method stub}
}

布局如下

<?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"><ImageViewandroid:id="@+id/iv"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center" /><SeekBarandroid:id="@+id/seek_bar_hue"android:layout_width="match_parent"android:layout_height="40dp" /><SeekBarandroid:id="@+id/seek_bar_saturation"android:layout_width="match_parent"android:layout_height="40dp" /><SeekBarandroid:id="@+id/seek_bar_Lum"android:layout_width="match_parent"android:layout_height="40dp" />
</LinearLayout>

效果如圖（不知道為什么只設(shè)置Hum會導(dǎo)致黑掉）

利用矩陣修改

上面是通過API對ColorMatrix間接修改，此外還可通過直接修改矩陣實(shí)現(xiàn)更精確的顏色修改，布局如下

<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"><ImageViewandroid:id="@+id/imageview"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2" /><GridLayoutandroid:id="@+id/group"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="3"android:columnCount="5"android:rowCount="4" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:onClick="btnChange"android:text="Change" /><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:onClick="btnReset"android:text="Reset" /></LinearLayout></LinearLayout>

代碼如下，創(chuàng)建一個4行5列矩陣，并將所設(shè)置的值轉(zhuǎn)化為ColorMatrix

public class MainActivity extends AppCompatActivity {private Bitmap mBitmap;private GridLayout mGroup;private ImageView mImageView;private int mEtWidth, mEtHeight;private EditText[] mEts = new EditText[20];private float[] mColorMatrix = new float[20];protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.b);mImageView = (ImageView) findViewById(R.id.imageview);mGroup = (GridLayout) findViewById(R.id.group);mImageView.setImageBitmap(mBitmap);mGroup.post(new Runnable() {@Overridepublic void run() {//無法在OnCreate()中獲取視圖的寬高，需通過post在視圖創(chuàng)建完畢后獲取mEtWidth = mGroup.getWidth() / 5;mEtHeight = mGroup.getHeight() / 4;addEts();initMatrix();}});}private void addEts() {for (int i = 0; i < 20; i++) {EditText editText = new EditText(this);mEts[i] = editText;mGroup.addView(editText, mEtWidth, mEtHeight);}}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.parseFloat(mEts[i].getText().toString());}}private void setImageMatrix() {Bitmap bmp = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bmp);Paint paint = new Paint();ColorMatrix colorMatrix = new ColorMatrix(mColorMatrix);paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));canvas.drawBitmap(mBitmap, 0, 0, paint);mImageView.setImageBitmap(bmp);}public void btnChange(View view) {getMatrix();setImageMatrix();}public void btnReset(View view) {initMatrix();getMatrix();setImageMatrix();}
}

效果如圖，如下修改了Green，使得圖片變綠

通過像素點(diǎn)處理

布局如下

<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"><ImageViewandroid:id="@+id/iv"android:layout_width="wrap_content"android:layout_height="wrap_content" />
</LinearLayout>

通過Bitmap的getPixels()獲取整個圖像的像素點(diǎn)，修改RGBA后再調(diào)用setPixelx()設(shè)置回去

public class MainActivity extends AppCompatActivity {protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ImageView iv = (ImageView) findViewById(R.id.iv);Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.b);iv.setImageBitmap(handlerImageNegative(bitmap));}public Bitmap handlerImageNegative(Bitmap bm) {int width = bm.getWidth();int height = bm.getHeight();int color;int r, g, b, a;Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);int[] oldPx = new int[width * height];int[] newPx = new int[width * height];bm.getPixels(oldPx, 0, width, 0, 0, width, height);for (int i = 0; i < width * height; i++) {color = oldPx[i];r = Color.red(color);g = Color.green(color);b = Color.blue(color);a = Color.alpha(color);r = 255 - r;g = 255 - g;b = 255 - b;if (r > 255) {r = 255;} else if (r < 0) {r = 0;}if (g > 255) {g = 255;} else if (g < 0) {g = 0;}if (b > 255) {b = 255;} else if (b < 0) {b = 0;}newPx[i] = Color.argb(a, r, g, b);}bmp.setPixels(newPx, 0, width, 0, 0, width, height);return bmp;}
}

如上實(shí)現(xiàn)圖像的反轉(zhuǎn)效果

圖像處理

通過變形矩陣處理

變形矩陣介紹

圖像像素點(diǎn)的X、Y坐標(biāo)可拆分為一個3行3列和3行一列矩陣相乘

其中3行3列矩陣即為Matrix，可通過調(diào)整Matrix間接調(diào)整X、Y

• 第一行 abc 決定新的 X
• 第二行 def 決定新的 Y
• 通常讓 g=h=0, i=1，保證 gX+hy+i =1 恒成立

當(dāng)a=e=i=1，其他為0時得到初始矩陣

平移變換（Translation）

平移變換指對每個像素點(diǎn)都進(jìn)行平移，當(dāng)p(x₀, y₀)平移到p(x, y)時，如圖

• X = X₀ + ΔX
• Y = Y₀ + ΔY

表現(xiàn)在矩陣上，則為加上偏移量

旋轉(zhuǎn)變換（Rotate）

旋轉(zhuǎn)變換指一個點(diǎn)圍繞一個中心旋轉(zhuǎn)到一個新的點(diǎn)，當(dāng)p(x₀, y₀)以坐標(biāo)原點(diǎn)為旋轉(zhuǎn)中心旋轉(zhuǎn)到p(x, y)時，如圖

• x₀ = r cosα
• y₀ = r sinα
• x = r cos(α+θ) = r cosα cosθ - r sinα sinθ = x₀ cosθ - y₀ sinθ
• y = r sin(α+θ) = r sinα cosθ + r cosα sinθ = y₀ cosθ + x₀ sinθ

表現(xiàn)在矩陣上，則為

如果要實(shí)現(xiàn)以任意點(diǎn)為旋轉(zhuǎn)中心進(jìn)行旋轉(zhuǎn)變換，則

• 將坐標(biāo)原點(diǎn)平移到旋轉(zhuǎn)中心
• 進(jìn)行旋轉(zhuǎn)變換
• 將坐標(biāo)原點(diǎn)還原

縮放變換（Scale）

縮放變換指對每個點(diǎn)坐標(biāo)都進(jìn)行相同比例的縮放，最終讓整個圖像縮放，計算公式為

• x = K₁ * x₀
• y = K₁ * y₀

表現(xiàn)在矩陣上，則為

錯切變換（Skew）

又稱剪切變換或縮并，讓所有點(diǎn)的X坐標(biāo)（或Y坐標(biāo)）保持不變，而另一個坐標(biāo)按比例發(fā)生平移，且平移的大小和該點(diǎn)到X軸（或Y軸）的垂直距離成正比

上圖為水平錯切，下圖為垂直錯切

• x = x₀ + K₁ * y₀
• y = K₂ * x₀ + y₀

表現(xiàn)在矩陣上，則為

利用矩陣修改

通過上面的分析，可知矩陣每個元素所對應(yīng)的功能

• a、e 控制縮放
• b、d 控制錯切
• c、f 控制平移
• a、b、d、e 控制旋轉(zhuǎn)

可自行調(diào)整矩陣實(shí)現(xiàn)圖像變換

float[] imageMatrix = new float[9];
Matrix matrix = new Matrix();
matrix.setValues(imageMatrix);canvas.drawBitmap(bitmap, matrix, null);

利用API修改

Matrix matrix = new Matrix();
matrix.setRotate();
matrix.setTranslate();
matrix.setScale();
matrix.setSkew();

通過像素塊處理

把圖像分成一個個小塊，通過改變每一個圖像塊來修改整個圖像，具體做法是

• 在圖像橫縱畫N-1條線構(gòu)成N*N個點(diǎn)
• 坐標(biāo)點(diǎn)以x₁、y₁、x₂、y₂的形式保存在數(shù)組中
• 通過改變坐標(biāo)值重新定義每一個圖像塊

public class FlagBitmapMeshView extends View {private final int WIDTH = 200;  //橫向分割線條數(shù)private final int HEIGHT = 200; //縱向分割線條數(shù)private int COUNT = (WIDTH + 1) * (HEIGHT + 1); //總圖像塊的個數(shù)private float[] verts = new float[COUNT * 2];   //調(diào)整后的矩陣，需要存x和y，所以*2private float[] orig = new float[COUNT * 2];    //調(diào)整前的矩陣private Bitmap bitmap;private float A = 50;private float k = 1;public FlagBitmapMeshView(Context context) {this(context, null);}public FlagBitmapMeshView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public FlagBitmapMeshView(Context context, AttributeSet attrs, int defStyleAttr) {this(context, attrs, defStyleAttr, 0);}public FlagBitmapMeshView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);initView(context);}private void initView(Context context) {bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.b);float bitmapWidth = bitmap.getWidth();float bitmapHeight = bitmap.getHeight();int index = 0;for (int y = 0; y <= HEIGHT; y++) {float fy = bitmapHeight * y / HEIGHT;   //按比例劃分高度，即y坐標(biāo)for (int x = 0; x <= WIDTH; x++) {float fx = bitmapWidth * x / WIDTH; //按比例劃分寬度，即x坐標(biāo)orig[index * 2] = verts[index * 2] = fx;    //先放x,后放yorig[index * 2 + 1] = verts[index * 2 + 1] = fy + 100;  //y+100讓圖像下移一點(diǎn)index += 1;}}}@Overrideprotected void onDraw(Canvas canvas) {flagWave();k += 0.1F;  //不斷更新k并重繪形成動態(tài)效果canvas.drawBitmapMesh(bitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);invalidate();}private void flagWave() {for (int y = 0; y <= HEIGHT; y++) {for (int x = 0; x <= WIDTH; x++) {//圖像的x坐標(biāo)不變verts[(y * (WIDTH + 1) + x) * 2] += 0;//圖像的y坐標(biāo)偏移量，sin（x坐標(biāo)占寬度的百分比 * 2PI + kPI），k用于動態(tài)更新float offsetY = (float) Math.sin((float) x / WIDTH * 2 * Math.PI + Math.PI * k);//圖像的y坐標(biāo)加上偏移量，A用于放大偏移量verts[(y * (WIDTH + 1) + x) * 2 + 1] = orig[(y * WIDTH + x) * 2 + 1] + offsetY * A;}}}
}

如上通過sin()函數(shù)實(shí)現(xiàn)飄揚(yáng)的效果