Android 高级UI7滤镜效果和颜色通道过滤
2019-02-20 本文已影响138人
香沙小熊
Android 高级UI 目录
滤镜效果:对图像进行一定的过滤加工处理。使用Paint设置滤镜效果
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);
//需要关闭硬件加速(没有关闭则没效果)
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);
//需要关闭硬件加速(没有关闭则没效果)
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的数组标量[x,y,z],用来指定光源的位置
* ambient, 指定周边背景光源(0~1)
* specular, 指镜面反射系数
* 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的滤镜处理
滤镜的所有处理效果都是通过颜色矩阵的变换实现的。
比如：美颜相机实现的特效(高光、复古、黑白)
（1）什么是矩阵？
假设矩阵A大小是MN，矩阵B大小是NP，C=AB
这里选取一个例子
这里的矩阵乘法要求相乘的两个矩阵一个的行数得等于另一个的列数，否则，无法进行乘机运算。
(2) 通过矩阵变换将一个图片、颜色块，过滤其中的红色、绿色（只留下蓝色）
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);
//需要关闭硬件加速(没有关闭则没效果)
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,
});
//设置颜色过滤器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
canvas.drawBitmap(bitmap,null,new RectF(0,0,400,400*bitmap.getHeight()/bitmap.getWidth()),paint);
}
}
矩阵
(3) 色彩运算
1.色彩的平移运算（加法运算）
2.色彩的缩放运算（乘法运算）
反相效果（类似曝光）
原来： 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);
//需要关闭硬件加速(没有关闭则没效果)
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,
});
//设置颜色过滤器
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);
//需要关闭硬件加速(没有关闭则没效果)
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,
});
//设置颜色过滤器
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);
//需要关闭硬件加速(没有关闭则没效果)
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三通道的色彩信息设置成一样，即：R=G=B
* 那么图像就变成了灰色，并且，为了保证图像亮度不变，
* 同一个通道中的R+G+B=1；如0.213+0.175+0.072 =1;
* RGB=0.213,0.175,0.072
* 三个数字是根据色彩光波频率及色彩心理学计算出来的
*/
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,
});
//设置颜色过滤器
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);
//需要关闭硬件加速(没有关闭则没效果)
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,
});
//设置颜色过滤器
paint.setColorFilter(new ColorMatrixColorFilter(matrix));
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);
//需要关闭硬件加速(没有关闭则没效果)
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,
});
//设置颜色过滤器
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构造方法
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设置色彩的缩放函数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设置色彩的饱和度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;
}
//饱和设置(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);
//需要关闭硬件加速(没有关闭则没效果)
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);
//设置颜色过滤器
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色彩旋转函数setRotate
参数axis,代表哪一个轴旋转，0，1，2
(0 绕着红色轴 R不变 G、B变)
(1 绕着绿色轴 G不变 R、B变)
(2 绕着蓝色轴 B不变 R、G变)
参数degrees:旋转度数
/**
* 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);
//需要关闭硬件加速(没有关闭则没效果)
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,代表哪一个轴旋转，0，1，2
* (0 绕着红色轴 R不变 G、B变)
* (1 绕着绿色轴 G不变 R、B变)
* (2 绕着蓝色轴 B不变 R、G变)
*
* degrees 旋转度数
**/
matrix.setRotate(0,90);
//设置颜色过滤器
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: 过滤颜色和增强色彩的方法（光照颜色过滤器）
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);
//需要关闭硬件加速(没有关闭则没效果)
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);
//需要关闭硬件加速(没有关闭则没效果)
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);
}
}
