進階UI彙總
Android中顔色值用32位的int值表示，ARGB ：A—Alpha值，RGB—顔色值
色彩由四階矩陣表示：
如果想将色彩（0，255，0，255）更改為半透明時，可以使用下面的的矩陣運算來表示
但是遇到下面的顔色變換需求：
- 1、紅色分量值更改為原來的2倍；
-
2、綠色分量增加100；
則使用4階矩陣的乘法無法實作，這個時候就需要使用五階矩陣進行運算，在四階色彩變換矩陣上增加一個“啞元坐标”，來實作所列的矩陣運算：
SeniorUI06_Paint實作濾鏡效果
##2 Paint實作濾鏡效果
濾鏡效果：對圖像進行一定的過濾處理
分類：Alpha濾鏡處理 和 顔色RGB的濾鏡處理
##3 Alpha濾鏡處理
對應api： public MaskFilter setMaskFilter(MaskFilter maskfilter)
1. BlurMaskFilter–用來繪制模糊陰影
API：
/**
* radius 陰影的半徑
* style 風格
* SOLID：圖像邊界外産生一層與Paint顔色一緻陰影效果，不影響圖像的本身
* OUTER：圖像邊界外産生一層陰影，并且将圖像變成透明效果
* INNER：在圖像内部邊沿産生模糊效果
*/
paint.setMaskFilter(new BlurMaskFilter(radius, style));
2. EmbossMaskFilter – 用來實作浮雕效果
/**
* direction 指定光源的位置，長度為xxx的數組标量[x,y,z]
* ambient 環境光的因子 （0~1），越接近0，環境光越暗
* specular 鏡面反射系數 越接近0，鏡面反射越強
* blurRadius 模糊半徑 值越大，模糊效果越明顯
* paint.setMaskFilter(new EmbossMaskFilter(direction,ambient,specular,blurRadius)
*/
代碼：MaskFilterView
##4 顔色RGB的濾鏡處理
-
色彩的平移運算—加法運算
在最後一列加上某個值，這樣就可以增加特定色彩的飽和度
色彩的反轉/反相；增加飽和度
-
色彩的縮放運算–乘法運算
高亮圖檔
顔色通道過濾（單獨紅色、綠色、藍色）
-
色彩的投射運算
黑白照片
色彩反色（兩個顔色交換）
複古照片
SeniorUI06_Paint實作濾鏡效果 SeniorUI06_Paint實作濾鏡效果
//顔色通道過濾
private void filter(Canvas canvas) {
canvas.translate(bitmap.getWidth() + 50,0);
canvas.drawText("顔色通道過濾（隻留紅色）:", 30, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
1, 0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,1,0,
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
//複古效果
private void vintage(Canvas canvas) {
canvas.translate(-bitmap.getWidth() - 50, bitmap.getHeight() + 60);
canvas.drawText("複古效果:", 30, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
1/2f,1/2f,1/2f,0,0,
1/3f, 1/3f,1/3f,0,0,
1/4f,1/4f,1/4f,0,0,
0,0,0,1,0,
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
//發色效果---（比如紅色和綠色交換）
private void colour(Canvas canvas){
canvas.translate(bitmap.getWidth() + 50,0);
canvas.drawText("發色效果（比如紅色和綠色交換）:", 30, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
0,1,0,0,0,
1, 0,0,0,0,
0,0,1,0,0,
0,0,0,1,0,
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
// 黑白照片
// 去色原理：隻要把R G B 三通道的色彩資訊設定成一樣，那麼圖像就會變成灰色，
// 同時為了保證圖像亮度不變，同一個通道裡的R+G+B =1
private void blackWhite(Canvas canvas) {
canvas.translate(-bitmap.getWidth() - 50, bitmap.getHeight() + 60);
canvas.drawText("黑白照片:", 30, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
0.213f, 0.715f, 0.072f, 0, 0,
0.213f, 0.715f, 0.072f, 0, 0,
0.213f, 0.715f, 0.072f, 0, 0,
0, 0, 0, 1, 0
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
//縮放運算---乘法 -- 顔色增強
private void scale(Canvas canvas) {
canvas.translate(bitmap.getWidth() + 50, 0);
canvas.drawText("縮放運算---乘法 -- 顔色增強", 30, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
1.2f, 0, 0, 0, 0,
0, 1.2f, 0, 0, 0,
0, 0, 1.2f, 0, 0,
0, 0, 0, 1, 0
});
//或者
// ColorMatrix colorMartrix = new ColorMatrix();
// colorMartrix.setScale(1.2f,1.2f,1.2f,1);
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
// 反相效果 -- 底片效果
private void opposition(Canvas canvas) {
canvas.translate(-bitmap.getWidth() - 50, bitmap.getHeight() + 60);
canvas.drawText("反相效果 -- 底片效果", 30, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
-1, 0, 0, 0, 255,
0, -1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
//平移運算：紅色加100
private void translate(Canvas canvas) {
canvas.translate(bitmap.getWidth() + 50, 0);
canvas.drawText("平移運算：紅色加100", 20, 50, paint);
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
1, 0, 0, 0, 0,
0, 1, 0, 0, 100,
0, 0, 1, 0, 0,
0, 0, 0, 255, 0
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, 20, 60, paint);
}
4 . 色彩的單獨加亮
/**
* Create a colorfilter that multiplies the RGB channels by one color,
* and then adds a second color. The alpha components of the mul and add
* arguments are ignored.
*/
public LightingColorFilter(@ColorInt int mul, @ColorInt int add) {
mMul = mul;
mAdd = add;
}
paint.setColorFilter(new LightingColorFilter(0x00ff00,0xff0000))；
- 色彩旋轉運算
SeniorUI06_Paint實作濾鏡效果
ColorMatrix colorMartrix = new ColorMatrix();
//colorMartrix.setSaturation(progress);
//aixs-- 0 紅色軸，1，綠色，2，藍色
// degrees -- 旋轉的角度
colorMartrix.setRotate(0,progress);
colorMartrix.setConcat合并兩個ColorMatrix
##5 透明度和色值運算混合實作
PortDuffColorFilter
##6 Demo
SeniorUI06_FilterActivity