android自定义滤镜,【Android】自定义View那点事（三）ColorFilter篇

最新推荐文章于 2023-07-22 10:00:00 发布
最新推荐文章于 2023-07-22 10:00:00 发布
阅读量413 收藏
点赞数
文章标签： android自定义滤镜

前言

前面学习Xfermode的使用，我们可以自定义各种不同样式的View，本节我们学习关于颜色处理相关的内容。现在很多图片处理软件都具有滤镜功能，选择不同风格滤镜可以改变图片色彩呈现不同风格。Android开发文档中提供了相应的API供开发者使用，这样我们自己可以实现图片滤镜效果。这节我们主要讲ColorMatrixColorFilter，ColorMatrixColorFilter通过ColorMatrix设置4*5的矩阵变换RGBA参数调整颜色。

色彩科普

在开始如何调整图片颜色之前，我们先了解一下关于色彩方面的知识。Ps:理论知识来源于度娘

色相

色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也就是由原色、间色和复色来构成的。色相，色彩可呈现出来的质地面貌。自然界中各个不同的色相是无限丰富的，如紫红、银灰、橙黄等。色相即各类色彩的相貌称谓。

色调

色调指的是一幅画中画面色彩的总体倾向，是大的色彩效果。这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体都带有同一色彩倾向，这样的色彩现象就是色调。

灰度

灰度使用黑色调表示物体,即用黑色为基准色，不同的饱和度的黑色来显示图像。 每个灰度对象都具有从 0%(白色)到100%(黑色)的亮度值。使用黑白或灰度扫描仪生成的图像通常以灰度显示。

对比度

对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小，好的对比率120:1就可容易地显示生动、丰富的色彩，当对比率高达300:1时，便可支持各阶的颜色。但对比率遭受和亮度相同的困境，现今尚无一套有效又公正的标准来衡量对比率，所以最好的辨识方式还是依靠使用者眼睛。

饱和度

饱和度可定义为彩度除以明度，与彩度同样表征彩色偏离同亮度灰色的程度。注意，与彩度完全不是同一个概念。但由于其和彩度决定的是出现在人眼里的同一个效果，所以才会出现视彩度与饱和度为同一概念的情况。

主角ColorMatrix

ColorMatrix通过设置4*5的矩阵数值改变图片的颜色和透明度。我们来看看官方文档的描述。No picture，say the JJ，来上图。

384b901cfb99

Paste_Image.png

可以看到4*5矩阵每一行的运算结果分别代表RGBA的最终的数值，以及它们取值范围在0-255之间。而每一行最后一个数值代表偏移量，例如想让R增加100偏移量，则将矩阵数组第四个数值设置为100。

ColorMatrix的reset()方法可以看到，颜色矩阵RGBA的初始情况。

384b901cfb99

Paste_Image.png

美图滤镜效果

原图

384b901cfb99

Paste_Image.png

|1,0,0,0,0|

|0,1,0,0,0|

|0,0,1,0,0|

|0,0,0,1,0|

泛黄矩阵

384b901cfb99

Paste_Image.png

|1,0,0,0,100|

|0,1,0,0,100|

|0,0,1,0,0|

|0,0,0,1,0|

偏红矩阵

384b901cfb99

Paste_Image.png

|2,0,0,0,0|

|0,1,0,0,0|

|0,0,1,0,0|

|0,0,0,1,0|

底片矩阵

384b901cfb99

Paste_Image.png

|-1,0,0,0,255|

|0,-1,0,0,255|

|0,0,-1,0,255|

|0,0,0,1,0|

主要代码

开发流程简介

1.获取图片资源draweBitmap

2.canvasBitmap获取draweBitmap用于创建画布canvas的大小

3.ColorMatrix设置颜色矩阵，ColorMatrixColorFilter加载ColorMatrix，paint设置ColorMatrixColorFilter

4.canvas使用paint绘制draweBitmap

5.imageView加载canvasBitmap

主视图部分

public class ColorFilterView extends LinearLayout{

ImageView imageView;

Button btnSetting;

Bitmap draweBitmap;

Bitmap canvasBitmap;

Canvas canvas;

Paint paint;

float[] ColorMatrixFloat = new float[20];

ColorMatrixDialog colorMatrixDialog;

public ColorFilterView(Context context) {

super(context);

initView(context);

}

public ColorFilterView(Context context, AttributeSet attrs) {

super(context, attrs);

initView(context);

}

private void initView(final Context context) {

this.setOrientation(VERTICAL);

imageView = new ImageView(context);

BitmapFactory.Options option = new BitmapFactory.Options();

DisplayMetrics displayMetrics = new DisplayMetrics();

((Activity)context).getWindow().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

draweBitmap = Utils.CompressImage(context, R.drawable.meizi,option,displayMetrics);

canvasBitmap = Bitmap.createBitmap(option.outWidth,option.outHeight, Bitmap.Config.ARGB_8888);

addView(imageView);

canvas = new Canvas(canvasBitmap);

paint = new Paint();

canvas.drawBitmap(draweBitmap,0,0,paint);

imageView.setImageBitmap(canvasBitmap);

btnSetting = new Button(context);

btnSetting.setText("MatrixSeeting");

btnSetting.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

colorMatrixDialog = new ColorMatrixDialog(context,ColorMatrixFloat);

colorMatrixDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {

@Override

public void onDismiss(DialogInterface dialog) {

changeMatrix(ColorMatrixFloat);

}

});

colorMatrixDialog.show();

}

});

addView(btnSetting);

}

private void changeMatrix(float[] color){

ColorMatrix colorMatrix = new ColorMatrix();

colorMatrix.set(color);

ColorMatrixColorFilter colorMatrixColorFilter = new ColorMatrixColorFilter(colorMatrix);

paint.setColorFilter(colorMatrixColorFilter);

canvas.drawBitmap(draweBitmap,0,0,paint);

imageView.setImageBitmap(canvasBitmap);

}

}

设置颜色矩阵Dialog

public class ColorMatrixDialog extends Dialog {

RecyclerView recyclerView;

List editTextList = new ArrayList<>();

float[] colors;

Button btnOk;

public ColorMatrixDialog(Context context,float[] colors) {

super(context);

init(context);

this.colors = colors;

}

public ColorMatrixDialog(Context context, int themeResId) {

super(context, themeResId);

init(context);

}

private void init(Context context){

LinearLayout linearLayout = new LinearLayout(context);

linearLayout.setOrientation(LinearLayout.VERTICAL);

recyclerView = new RecyclerView(context);

recyclerView.setLayoutManager(new GridLayoutManager(context,5));

recyclerView.setAdapter(new EditextAdapter());

linearLayout.addView(recyclerView);

btnOk = new Button(context);

btnOk.setText("OK");

btnOk.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

int num = 0;

for(EditText editText : editTextList){

try {

String value = editText.getText().toString();

float floatValue = Float.valueOf(value);

colors[num] = floatValue;

}catch (NumberFormatException e){

e.printStackTrace();

}

num++;

}

dismiss();

}

});

linearLayout.addView(btnOk);

addContentView(linearLayout,new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

}

class EditextAdapter extends RecyclerView.Adapter{

@Override

public EditTextViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

EditText editText = new EditText(parent.getContext());

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

layoutParams.weight = 1;

editText.setLayoutParams(layoutParams);

editText.setGravity(View.TEXT_ALIGNMENT_CENTER);

editText.setInputType(InputType.TYPE_CLASS_NUMBER|InputType.TYPE_NUMBER_FLAG_DECIMAL|InputType.TYPE_NUMBER_FLAG_SIGNED);

editTextList.add(editText);

return new EditTextViewHolder(editText);

}

@Override

public void onBindViewHolder(EditTextViewHolder holder, int position) {

holder.editText.setText("0");

}

@Override

public int getItemCount() {

return 20;

}

}

class EditTextViewHolder extends RecyclerView.ViewHolder{

EditText editText;

public EditTextViewHolder(View itemView) {

super(itemView);

editText = (EditText)itemView;

}

}

}

补充内容

除了使用颜色矩阵改变,在官方文档中还可以看到ColorMatrix另外几个方法

384b901cfb99

Paste_Image.png

384b901cfb99

Paste_Image.png

384b901cfb99

Paste_Image.png

这三个方法分别设置饱和度、亮度、色相。

演示代码

private void changeRGBA(){

float R = (rSeekBar.getProgress() -127) * 1.0f /127 * 180;

float G = gSeekBar.getProgress() * 1.0f / 127;

float B = bSeekBar.getProgress() * 1.0f / 127;

//色相

ColorMatrix colorMatrixRotate = new ColorMatrix();

colorMatrixRotate.setRotate(0,R);

colorMatrixRotate.setRotate(1,R);

colorMatrixRotate.setRotate(2,R);

//饱和度

ColorMatrix colorMatrixSaturation = new ColorMatrix();

colorMatrixSaturation.setSaturation(G);

//亮度

ColorMatrix colorMatrixScale = new ColorMatrix();

colorMatrixScale.setScale(B,B,B,1);

ColorMatrix colorMatrix = new ColorMatrix();

colorMatrix.postConcat(colorMatrixRotate);

colorMatrix.postConcat(colorMatrixSaturation);

colorMatrix.postConcat(colorMatrixScale);

ColorMatrixColorFilter colorMatrixColorFilter = new ColorMatrixColorFilter(colorMatrix);

paint.setColorFilter(colorMatrixColorFilter);

canvas.drawBitmap(draweBitmap,0,0,paint);

imageView.setImageBitmap(canvasBitmap);

}

效果展示

384b901cfb99

620019632-5815ffd94819e_articlex.gif

莫泽成
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ffplay.c，ffplay自定义滤镜实现源码
06-29
做的一个ffplay自定义滤镜指定区域涂黑效果，根据bin文件中定义的数据流，每一位代表播放时一块16*16的像素块，1则涂黑，0不变
ColorMatrix(颜色滤镜)介绍和使用
minwenping的博客
06-27 7226
颜色矩阵，对每一个像素点的颜色（ARGB）进行更改，像ps一样的改变图像的颜色。因为运算大量的像素点，colorMatrix是native方法。 这里主要是讲怎么使用。 一。先看下面色彩矩阵表示方式 看看运行效果，将上面的色块进行矩阵变换，去掉了红色元素，透明度变为之前的0.8f，矩阵代码如下： matrix.set(new float[]{ 1,0,0,
自定义控件（2）---ColorMatrixColorFilter色彩矩阵颜色过滤器
全干工程师
11-09 2001
可以通过Paint中大量的setter方法来为画笔设置属性 setColorFilter(ColorFilter filter) 设置颜色过滤，什么意思呢？就像拿个筛子把颜色“滤”一遍获取我们想要的色彩结果，这个方法需要我们传入一个ColorFilter参数同样也会返回一个ColorFilter实例，那么ColorFilter类是什么呢？ ColorMatrixColorFilter
Android 之 Paint API —— ColorFilter (颜色过滤器) (1-3)
leyang0910的博客
07-21 316
代码非常的简单，就加载布局，然后往GridLayout里面塞 5 * 4 个EditText，这里用 post()方法是为了保证GridLayout加载完毕后才去获取长宽，不然在获取GridLayout长 宽的时候可是获取不到值的！次次都这样肯定很麻烦，谁会去记矩阵 里的应该填的值？如题，颜色矩阵(4 * 5)，我们可以修改矩阵中的值，来实现黑白照，泛黄老照片，高对比度等效果！不知道你看懂上图没，如果你学过高数的话，肯定对此很熟悉，无非是矩阵的叉乘而已，没学过也没关系 计算方法就是右下角那个，
Android图像处理——Paint之ColorFilter
Vincent的专栏
04-22 1万+
平时在Android开发中，一般不太可能频繁使用到Paint——画笔。但是在某些特殊的情况下，例如 自定义控件（继承View）的时候，有时候就需要请出画笔在画布（Canvas，将下篇文章中讲述Canvas）上像“画”出我们想要的元素。然而，很多开发人员对画笔Paint的了解知之甚少，包括我自己在内，所以在今天在这里总结一下Paint的在Android图像处理中起到的作用和用法。
android 自定义View动画全集
09-01
app包含图层混合 滤镜效果 粒子爆炸 拖拽气泡 动画绘制文字 圆形水波纹进度条 自定义加载动画 Splash动画等
Android 的自定义拍摄，主题，滤镜
08-27
Android 的自定义拍摄，主题，滤镜，都学习下。希望可以学到很多的知识
android完美的图片滤镜效果
12-16
android图片滤镜，保证可运行，最全滤镜效果，可手动调节，基于ColorMatrix。关于图片滤镜的效果，必须参考一下，相信一定会有收获的。
CameraFilter：on Android上的实时相机滤镜
02-05
CameraFilter 实时相机滤镜。 通过OpenGL着色器处理帧。 进行尝试。筛选器感谢着色器代码的原始作者。 我只是将它们从webgl移植到opengl es。 过滤预习过滤预习
Android开发 之 ColorFilter详解
z_x_Qiang的博客
09-11 1217
ColorFilter详解 转自：http://blog.csdn.net/abcdef314159 http://blog.csdn.net/allen315410/article/details/45059989 ColorFilter主要用来处理颜色，这里将讲解它的三个子类，ColorMatrixColorFilter,  LightingColorFilter以及PorterDuf
ColorFilter与ColorMatrix
飞鸟
10-23 1651
ColorFilter ColorMatrixColorFilter         该类内部引用的有一个ColorMatrix对象，它的主要工作也是通过ColorMatrix完成的。而且主要工作原理也可以看ColorMatrix类的注释。示例如下： protected void onDraw(Canvas canvas) { super.onDraw(canvas
Android中ColorFilter滤色器的使用
piaomiao8179的博客
06-20 1372
前言：ColorFilter滤色器是主要通过Paint画笔进行像素颜色的处理。A color filter can be used with a Paint to modify the color of each pixel drawn with that paint.This is an abstract class that should never be used directly.从上面的英
Android滤镜--ColorMatrixColorFilter--ColorMatrix
aruba的博客
01-10 261
之前用到ColorMatrixColorFilter，其中除了传入一个五阶矩阵外，还可以使用ColorMatrix，调用其成员函数 /** * Set this colormatrix to scale by the specified values. */ public void setScale(float rScale, float gScale, float b...
Android色彩矩阵——ColorMatrix
Lxr的博客
08-31 1779
在Android的开发中，我们少不了对图片进行处理，其中最常使用的数据结构就是位图Bitmap，它包含了一张图片的所有数据。既然是位图那它就是由一个个像素点组成的。每一个像素点都会有其对应的颜色值——ARGB，分别对应透明度、红、绿、蓝这四个分量。它们共同决定了每个像素点显示的颜色。色彩矩阵概念在Android中图片是以RGBA像素点的形式加载到内存中的，修改这些像素信息需要一个叫做ColorMat
Android：滤镜效果ColorMatrix用法一
Android_Study_OK的博客
07-19 1888
直接上工具类 代码注释写的很清楚了 注意事项： 先复制一张跟原图一模一样的bitmap，不能在原图上做修改 ★★★★★切记，不能使用colorMatrix.setRotate()连续设置各个通道的色调,这样的话，会让最后一个覆盖前面的效果,而是要通过postConcat混合多个ColorMatrix package performance.brilliant.com.bril...
Android自定义控件入门到精通--ColorFilter
Jhone_csdn的专栏
06-23 1044
文章目录ColorFilterPorterDuffColorFilterLightingColorFilterColorMatrixColorFilter颜色矩阵公式过滤颜色反色去色颜色互换色相调整 ColorFilter BlendModeColorFilter是Api29之后加入的，目前不作研究！ PorterDuffColorFilter PorterDuffColorFilter(int color,PorterDuff.Mode mode) color : SRC(源) mode ：混合模式
Android 之 Paint API —— ColorFilter (颜色过滤器) (2-3)
最新发布
leyang0910的博客
07-22 279
大概意思就是：一个颜色过滤器，可以用来模拟简单的灯光效果，构造方法的参数有两个，一个 用来乘以原图的RPG值，一个添加到前面得出的结果上！，从而得到新的RPG值，这里的%是求余，另外，整个过程中Alpha不 参与改变！下面我们写个示例来验证验证！好了，LightingColorFilter的使用演示完毕~android:text="变化" />上一节中我们讲解了Android中Paint。
Android基础入门教程——8.3.9 Paint API之—— ColorFilter(颜色过滤器)(1-3)
热门推荐
Coder-Pig的猪栏
10-28 3万+
我们前面学习了MaskFilter(面具)，用它的两个子类BlurMaskFilter弄了下模糊效果，EmbossMaskFilter 弄了下浮雕效果，而本节我们来学习的是另一个API——ColorFilter(颜色过滤器)，和MaskFilter一样， 我们并不直接使用该类，而是使用该类的三个子类： 颜色矩阵颜色过滤器：ColorMatrixColorFilter 光照色彩过滤器：LightingColor
android 自定义相册
05-16
Android自定义相册是指开发者自己设计的相册界面，具备更强的自定义性和更好的用户体验。相比系统自带相册，自定义相册可以根据需求自由设置样式、筛选和排序图片，添加各种交互效果等。 自定义相册开发中需要注意以下几点： 1. 图片获取：可以使用系统自带的媒体库，也可以使用第三方库。 2. 图片加载：为了避免OOM（Out Of Memory）错误，开发者需要使用图片加载库进行异步加载，例如Picasso、Glide等。 3. 图片处理：可以使用第三方库实现多种图片操作，例如裁剪、旋转、缩放、滤镜等。 4. 自定义UI：相册界面的设计需要根据需求自定义，例如添加头部、底部菜单栏等。 5. 图片预览和编辑：相册界面需要实现图片预览和编辑功能，例如放大、缩小、删除等。 在开发自定义相册时，需要细心而耐心地进行设计和实现，同时也应关注性能和用户体验，让用户能够轻松地使用和享受自定义相册带来的便利和快乐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值