自定义View-第十八步：ColorMatrix
2017-02-24 本文已影响99人
crossroads
前言
根据启舰大大 的博客所学习的自定义View。
ColorMatrix
色彩矩阵
注意：对于色彩变换矩阵，这里的色彩顺序是R、G、B、A而不是A、R、G、B！！！
但是，ColorMatrix是五阶矩阵，WHY？
使用四阶的色彩变换矩阵来修改色彩，只能够对色彩的每一个分量值进行乘（除）运算，如果要对这些分量值进行加减法的运算（平移变换），只能通过五阶矩阵来完成。
考虑下面这个变换：
1、红色分量值更改为原来的2倍；
2、绿色分量增加100；
则使用4阶矩阵的乘法无法实现，所以，应该在四阶色彩变换矩阵上增加一个“哑元坐标”，来实现所列的矩阵运算:
如果想不通，手动算一下就OK啦
添加一下矩阵运算的回顾，嘿嘿
A矩阵的列数必须与B矩阵的行数相同，才能相乘！因为我们需要把A中的一行中的各个数字与B矩阵中的一列中的各个数字分别相乘，所以A的列数与B的行数必须相同才行！
矩阵A乘以矩阵B和矩阵B乘以矩阵A的结果必然是不一样的。
ColorMatrics示例
//构造函数
ColorMatrix()
ColorMatrix(float[] src)
ColorMatrix(ColorMatrix src) //利用另一个ColorMatrix实例来复制一个一样的ColorMatrix对象
//设置重置函数
public void set(ColorMatrix src)
public void set(float[] src)
public void reset()
//返回当前ColorMatrics对象中的所保存的矩阵
public float[] getArray()
1. 蓝色通道输出
paint.setColorFilter(null);
//原图
canvas.drawBitmap(bitmap,null,new RectF(0,0,bitmap.getWidth(),bitmap.getHeight()),paint);
canvas.translate(bitmap.getWidth()+100,0);
//色彩矩阵，切记是RGBA
ColorMatrix colorMatrix = 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(colorMatrix));
//蓝色通道输出
canvas.drawBitmap(bitmap,null,new RectF(0,0,bitmap.getWidth(),bitmap.getHeight()),paint);
蓝色通道效果图
2. 在色彩变换矩阵的最后一行加上某个值，增加特定色彩的饱和度
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
1,0,0,0,0,
0,1,0,0,50,
0,0,1,0,0,
0,0,0,1,0,
});
效果图
3. 色彩反转/反相功能：色彩反转就是求出每个色彩的补值来做为目标图像的对应颜色值
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,
});
4. 色彩缩放变换：在色彩矩阵对角线上的分别代表R、G、B、A的几个值，将其分别乘以指定的值
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.2f,0,
});
4. 色彩的投射运算
- 灰白照片
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,
});
效果图
这个值是google最终给我们的颜色值。
- 照片变旧
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
});
来自http://blog.csdn.net/harvic880925/article/details/51187277
下面开始，就是使用各种方法啦
5. setSaturation——设置饱和度
//整体增强颜色饱和度，即同时增强R,G,B的色彩饱和度
public void setSaturation(float sat)
- float sat：表示把当前色彩饱和度放大的倍数;取值为0表示完全无色彩，即灰度图像（黑白图像）；取值为1时，表示色彩不变动；当取值大于1时，显示色彩过度饱和
直接上代码⤵️
<ImageView
android:layout_centerInParent="true"
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
/>
<SeekBar
android:layout_marginTop="10dp"
android:layout_below="@id/img"
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="30dp"/>
SeekBar seek = (SeekBar) findViewById(R.id.seekbar);
final ImageView img = (ImageView) findViewById(R.id.img);
seek.setMax(20);
seek.setProgress(1);
mOriginBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);
seek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
handleColorMatriBmp(progress);
img.setImageBitmap(mTempBmp);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
private void handleColorMatriBmp(int progress) {
Canvas canvas = new Canvas(mTempBmp);//得到画笔对象，用于绘制调色后的图片
Paint paint = new Paint();
paint.setAntiAlias(true);
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setSaturation(progress);
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(mOriginBmp, 0, 0, paint);
}
效果图
**6. setScale——色彩缩放 **
public void setScale(float rScale, float gScale, float bScale,float aScale) //分别对应R,G,B,A颜色值的缩放倍数
Canvas canvas = new Canvas(mTempBmp);//得到画笔对象，用于绘制调色后的图片
Paint paint = new Paint();
paint.setAntiAlias(true);
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setScale(1,1.3f,1,1);//将绿色放大1.3倍
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(mOriginBmp, 0, 0, paint);
效果图
7. setRotate——色彩旋转
/**
* 将旋转围绕某一个颜色轴旋转
* axis=0 围绕红色轴旋转
* axis=1 围绕绿色轴旋转
* axis=2 围绕蓝色轴旋转
*/
public void setRotate(int axis, float degrees)；
- int axis：表示围绕哪个轴旋转，取值为0，1，2；取0时表示围绕红色轴旋转；取值1时，表示围绕绿色轴旋转；取值2时，表示围绕蓝色轴旋转；
- float degrees：表示旋转的度数
举个栗子
seek.setMax(360);
seek.setProgress(180);
mOriginBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);
seek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
handleColorMatriBmp(progress);
img.setImageBitmap(mTempBmp);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
private void handleColorMatriBmp(int progress) {
Canvas canvas = new Canvas(mTempBmp);//得到画笔对象，用于绘制调色后的图片
Paint paint = new Paint();
paint.setAntiAlias(true);
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setRotate(2,progress-180);//围绕蓝色轴旋转，度数是-180度 ~ +180度
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(mOriginBmp, 0, 0, paint);
}
效果图
-
在将蓝色轴做为Z轴，仅在红—绿平面上旋转a度的情况，即绕蓝色轴旋转a度
对应的色彩变换矩阵：
-
绕红色轴旋转a度
对应的色彩变换矩阵：
3.绕绿色轴旋转a度
对应的色彩变换矩阵是
