Android 高級UI 目錄
濾鏡效果:對圖像進(jìn)行一定的過濾加工處理。使用Paint設(shè)置濾鏡效果
1.MaskFilter遮罩濾鏡處理
(1)模糊遮罩濾鏡 (BlurMaskFilter)
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE,null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
canvas.translate(400,0);
/**
* 模糊遮罩 濾鏡效果
* Blur.NORMAL
* Blur.SOLID
* Blur.OUTER
* Blur.INNER
*/
paint.setMaskFilter(new BlurMaskFilter(50,Blur.NORMAL));
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
}
}
(2)浮雕遮罩濾鏡(EmbossMaskFilter)
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE,null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
canvas.translate(400,0);
/**
* direction, 指定長度為xxx的數(shù)組標(biāo)量[x,y,z],用來指定光源的位置
* ambient, 指定周邊背景光源(0~1)
* specular, 指鏡面反射系數(shù)
* blurRadius，指定模糊半徑
*/
paint.setMaskFilter(new EmbossMaskFilter(new float[]{400,300,100},0.5f,60,100 ));
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
}
}
2.顏色RGB的濾鏡處理
濾鏡的所有處理效果都是通過顏色矩陣的變換實(shí)現(xiàn)的。
比如：美顏相機(jī)實(shí)現(xiàn)的特效(高光、復(fù)古、黑白)
（1）什么是矩陣？
假設(shè)矩陣A大小是MN，矩陣B大小是NP，C=AB
這里選取一個(gè)例子
這里的矩陣乘法要求相乘的兩個(gè)矩陣一個(gè)的行數(shù)得等于另一個(gè)的列數(shù)，否則，無法進(jìn)行乘機(jī)運(yùn)算。
(2) 通過矩陣變換將一個(gè)圖片、顏色塊，過濾其中的紅色、綠色（只留下藍(lán)色）
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
canvas.translate(400,0);
ColorMatrix matrix = new ColorMatrix(new float[]{
0, 0, 0, 0,0,
0, 0, 0, 0,0,
0, 0, 1, 0,0,
0, 0, 0, 1,0,
});
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
}
}
矩陣
(3) 色彩運(yùn)算
1.色彩的平移運(yùn)算（加法運(yùn)算）
2.色彩的縮放運(yùn)算（乘法運(yùn)算）
反相效果（類似曝光）
原來： RGB = 100，200，250
反相后：RGB = 155，55，5
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.argb(255, 200, 100, 100));
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
/**
* 反相效果
* 透明度不反相
*/
ColorMatrix matrix = new ColorMatrix(new float[]{
-1, 0, 0, 0, 255,
0, -1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0,
});
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawRect(0, 0, 400, 400, paint);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
顏色增強(qiáng)(變亮效果)
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.argb(255, 200, 100, 100));
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
/**
* 反相效果
* 透明度不反相
*/
ColorMatrix matrix = 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.2f, 0,
});
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawRect(0, 0, 400, 400, paint);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
圖片黑白效果
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
canvas.translate(400,0);
/**
* 去色原理：只要把RGB三通道的色彩信息設(shè)置成一樣，即：R=G=B
* 那么圖像就變成了灰色，并且，為了保證圖像亮度不變，
* 同一個(gè)通道中的R+G+B=1；如0.213+0.175+0.072 =1;
* RGB=0.213,0.175,0.072
* 三個(gè)數(shù)字是根據(jù)色彩光波頻率及色彩心理學(xué)計(jì)算出來的
*/
ColorMatrix matrix = 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,
});
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
}
}
final float R = 0.213f * invSat;
final float G = 0.715f * invSat;
final float B = 0.072f * invSat;
反色效果
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
//反色效果
ColorMatrix matrix = new ColorMatrix(new float[]{
0, 1f, 0, 0, 0,
1f, 0, 0, 0, 0,
0, 0, 1f, 0, 0,
0, 0, 0, 1f, 0,
});
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
復(fù)古風(fēng)格
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
ColorMatrix matrix = 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, 1f, 0,
});
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
3.ColorMatrix的API
3.1ColorMatrix構(gòu)造方法
ColorMatrix matrix = 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, 1f, 0,
});
ColorMatrix matrix = new ColorMatrix();
matrix.set(src);
3.2設(shè)置色彩的縮放函數(shù)setScale(色彩變亮或者變暗)
//色彩變亮或者變暗
matrix.setScale(1,1,1.4f,1);
源碼：
/**
* Set this colormatrix to scale by the specified values.
*/
public void setScale(float rScale, float gScale, float bScale,
float aScale) {
final float[] a = mArray;
for (int i = 19; i > 0; --i) {
a[i] = 0;
}
a[0] = rScale;
a[6] = gScale;
a[12] = bScale;
a[18] = aScale;
}
3.3設(shè)置色彩的飽和度setSaturation
源碼：
public void setSaturation(float sat) {
reset();
float[] m = mArray;
final float invSat = 1 - sat;
final float R = 0.213f * invSat;
final float G = 0.715f * invSat;
final float B = 0.072f * invSat;
m[0] = R + sat; m[1] = G; m[2] = B;
m[5] = R; m[6] = G + sat; m[7] = B;
m[10] = R; m[11] = G; m[12] = B + sat;
}
//飽和設(shè)置(0:灰色 0～1飽和度降低 1.原來不變 >1 增加飽和度)
示例：
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
ColorMatrix matrix = new ColorMatrix();
//色彩變亮或者變暗
//matrix.setScale(1,1,1.4f,1);
matrix.setSaturation(1.8f);
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
matrix.setSaturation(1.8f);增加了飽和度
3.4色彩旋轉(zhuǎn)函數(shù)setRotate
參數(shù)axis,代表哪一個(gè)軸旋轉(zhuǎn)，0，1，2
(0 繞著紅色軸 R不變 G、B變)
(1 繞著綠色軸 G不變 R、B變)
(2 繞著藍(lán)色軸 B不變 R、G變)
參數(shù)degrees:旋轉(zhuǎn)度數(shù)
/**
* Set the rotation on a color axis by the specified values.
* <p>
* <code>axis=0</code> correspond to a rotation around the RED color
* <code>axis=1</code> correspond to a rotation around the GREEN color
* <code>axis=2</code> correspond to a rotation around the BLUE color
* </p>
*/
public void setRotate(int axis, float degrees) {
reset();
double radians = degrees * Math.PI / 180d;
float cosine = (float) Math.cos(radians);
float sine = (float) Math.sin(radians);
switch (axis) {
// Rotation around the red color
case 0:
mArray[6] = mArray[12] = cosine;
mArray[7] = sine;
mArray[11] = -sine;
break;
// Rotation around the green color
case 1:
mArray[0] = mArray[12] = cosine;
mArray[2] = -sine;
mArray[10] = sine;
break;
// Rotation around the blue color
case 2:
mArray[0] = mArray[6] = cosine;
mArray[1] = sine;
mArray[5] = -sine;
break;
default:
throw new RuntimeException();
}
}
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);[圖片上傳中...(WeChat66f51a0be417603f2969ad62c592c06e.png-b9aa68-1550653211087-0)]
ColorMatrix matrix = new ColorMatrix();
/**
* axis,代表哪一個(gè)軸旋轉(zhuǎn)，0，1，2
* (0 繞著紅色軸 R不變 G、B變)
* (1 繞著綠色軸 G不變 R、B變)
* (2 繞著藍(lán)色軸 B不變 R、G變)
*
* degrees 旋轉(zhuǎn)度數(shù)
**/
matrix.setRotate(0,90);
//設(shè)置顏色過濾器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
4ColorFilter使用的子類
4.1ColorMatrixColorFilter：色彩矩陣的顏色過濾器
4.2LightingColorFilter: 過濾顏色和增強(qiáng)色彩的方法（光照顏色過濾器）
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
/**
* mul，multiply 使相乘 ---縮放
* add，相加 ---平移
*/
paint.setColorFilter(new LightingColorFilter(0x00ff00,0xff0000));
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
4.3PorterDuffColorFilter混合過濾器
public class MaskFilterView extends View {
public MaskFilterView(Context context) {
super(context);
}
public MaskFilterView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//需要關(guān)閉硬件加速(沒有關(guān)閉則沒效果)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
canvas.translate(400, 0);
/**
* color:
* mode:
*/
paint.setColorFilter(new PorterDuffColorFilter(Color.RED, Mode.MULTIPLY));
canvas.drawBitmap(bitmap, null,
new RectF(0, 0, 400, 400 * bitmap.getHeight() / bitmap.getWidth()), paint);
}
}
