第11章 CustomView Matrix与坐标变换

最新推荐文章于 2023-08-31 10:26:02 发布

itzyjr

最新推荐文章于 2023-08-31 10:26:02 发布

阅读量387

点赞数

分类专栏：《Android自定义控件开发入门与实战》笔记

本文链接：https://blog.csdn.net/itzyjr/article/details/106844044

版权

《Android自定义控件开发入门与实战》笔记专栏收录该内容

14 篇文章 2 订阅

订阅专栏

一、矩阵运算

矩阵的加法与减法：

1.运算规则

设矩阵

则 $A\pm B=$

简言之，两个矩阵相加减，即它们相同位置的元素相加减。

注意：只有对于两个行数、列数分别相等（同型矩阵），加减法运算才有意义，即加减法运算是可行的。

2.运算性质

交换律：A+B=B+A

结合律：(A+B)+C=A+(B+C)

矩阵与数的乘法：

1.运算规则

数 $\gamma$ 乘以矩阵A，就是将数 $\gamma$ 乘以矩阵A中的每一个元素，记为 $\gamma$ A或A $\gamma$ 。

特别地，称为 $A=(a_{ij})_{m\times s}$ 的负矩阵。

2.运算性质

结合律： $(\gamma \mu)A=\gamma(\mu A); (\gamma+\mu)A=\gamma A+\mu A$

分配律： $\gamma (A+B)=\gamma A + \gamma B$

例：已知两个矩阵 $A=\begin{bmatrix} 3& -1& 2\\ 1& 5& 7\\ 2& 4& 5 \end{bmatrix}$ ， $B=\begin{bmatrix} 7& 5& -2\\ 5& 1& 9\\ 4& 2& 1 \end{bmatrix}$ ，满足矩阵方程A+2X=B，求未知矩阵X。

解：

$X=\frac{1}{2}(B-A)=\frac{1}{2}(\begin{bmatrix} 7 & 5 &-2 \\ 5 & 1 &9 \\ 4 & 2 &1 \end{bmatrix}-\begin{bmatrix} 3 &-1 & 2\\ 1 & 5& 7\\ 2 & 4& 5 \end{bmatrix}) =\frac{1}{2}\begin{bmatrix} 4 & 6 & -4\\ 4 & -4 & 2\\ 2 & -2 & -4 \end{bmatrix}=\begin{bmatrix} 2 & 3 & -2\\ 2 & -2 & 1\\ 1 & -1 & -2 \end{bmatrix}$

矩阵与矩阵的乘法：

1.运算规则

设 $A=(a_{ij})_{m\times s},B=(b_{ij})_{s\times n}$

则A与B的乘积C是这样一个矩阵：

（1）行数与（左矩阵）A相同，列数与（右矩阵）B相同；

（2）C的第i行与第j列的元素 $c_{ij}$ 由A的第i行元素与B的第j列元素对应相乘，现取乘积之和。

定义：设A为 $m\times p$ 的矩阵，B为 $p\times n$ 的矩阵，那么称 $m\times n$ 的矩阵C为矩阵A与B的乘积，记作C=AB，其中矩阵C中的第i行和第j列元素可以表示为： $(AB)_{ij}=\sum_{k=1}^{p}a_{ik}b_{kj}=a_{i1}b_{1j}+a_{i2}b_{2j}+...+a_{ip}b_{pj}$

如下所示：

$C=AB=\bigl(\begin{smallmatrix} 1 & 2 & 3\\ 4 & 5 & 6 \end{smallmatrix}\bigr)\begin{pmatrix} 1 & 4\\ 2 & 5\\ 3 & 6 \end{pmatrix}=\bigl(\begin{smallmatrix} 1\times 1+ 2\times 2+3\times3& 1\times4+2\times5+3\times6\\ 4\times1+5\times2+6\times3& 4\times4+5\times5+6\times6 \end{smallmatrix}\bigr)=\bigl(\begin{smallmatrix} 14 & 32\\ 32 & 77 \end{smallmatrix}\bigr)$

$D=BA=\begin{pmatrix} 1 & 4\\ 2 & 5\\ 3 & 6 \end{pmatrix}\bigl(\begin{smallmatrix} 1 & 2 & 3\\ 4 & 5 & 6 \end{smallmatrix}\bigr)=\begin{pmatrix} 1\times1+4\times4 &1\times2+4\times5 & 1\times3+4\times6\\ 2\times1+5\times4 & 2\times2+5\times5 & 2\times3+5\times6\\ 3\times1+6\times4 & 3\times2+6\times5 & 3\times3+6\times6 \end{pmatrix}=\begin{pmatrix} 17 & 22 & 27\\ 22 & 29 & 36\\ 27 & 36 & 45 \end{pmatrix}$

2.运算性质（假设运算都是可行的）

（1）结合律： (AB)C=A(BC)

（2）分配律： $A(B\pm C)=AB\pm AC$ (左分配律)； $(B\pm C)A=BA\pm CA$ （右分配律）

（3） $(\gamma A)B=\gamma (AB)=A(\gamma B)$

二、ColorMatrix色彩变换

对于色彩的存储，Bitmap类使用一个32位的数值来保存，红、绿、蓝及透明度各占8位，每个色彩分量的取值范围是0~255。透明度为0表示完全透明，为255时色彩完全可见。

1.色彩信息的矩阵表示

由于一个色彩信息包含R、G、B、Alpha信息，所以，我们必然要使用一个四阶色彩变换矩阵来修改色彩的每一个分量值。

注意：对于色彩变换矩阵，这里的色彩顺序是R、G、B、A，而不是A、R、G、B。

如果想将色彩(0,255,0,255)更改为半透明，则可以使用下面的矩阵运算来表示：

上面使用四阶矩阵完全可以改变图片的RGBA值，但考虑一种情况：如果我们只想在原有的R色上增加一些分量呢?
这时，我们就得再多加一阶来表示平移变换。所以，一个既包含线性变换又包含平移变换的组合变换称为仿射变换。使用四阶色彩变换矩阵来修改色彩，只能对色彩的每个分量值进行乘(除)运算。如果要对这些分量值进行加减法运算(平移变换)，则只能通过五阶矩阵来完成。
考虑下面这个变换：
(1)红色分量值更改为原来的2倍。(2)绿色分量值增加100。
这个变换使用四阶矩阵的乘法无法实现。所以，应该在四阶色彩变换矩阵上增加一个“哑元坐标”，来实现所列的矩阵运算。

（在这个矩阵中，分量值用的是100）

2.Android中的色彩变换矩阵

在Android中，色彩变换矩阵的表示形式也是五阶的。所以，在默认情况下，色彩变换矩阵的形式如下：

Android中的色彩变换矩阵是用ColorMatrix类来表示的。使用ColorMatrix类的方法如下：

ColorMatrix colorMatrix = new ColorMatrix(new float[]{
    1, 0, 0,   0, 0,
    0, 1, 0,   0, 0,
    0, 0, 1,   0, 0,
    0, 0, 0, 0.5, 0
}) ;
mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));

3.示例：彩色图片的蓝色通道输出

public class MyView extends View {
    private Paint mPaint = new Paint();
    private Bitmap bitmap;// 位图
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint.setAntiAlias(true);
        // 获取位图
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.dog);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制原始位图
        canvas.drawBitmap(bitmap, null, new Rect(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth()), mPaint);
        canvas.translate(510, 0);
        // 生成色彩变换矩阵
        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
        });
        mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(bitmap, null, new Rect(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth()), mPaint);
    }
}

这里分两次绘制了一个Bitmap，先绘制了一个原始图像，然后利用ColorMatrix类生成了一个仅包含蓝色的图像。用过Photoshop的读者应该很清楚，这跟Photoshop中蓝色通道的效果是一致的。效果如下图所示。

注意：不要在onDraw()函数里面创建Paint对象，否则会造成内存回收，严重影响性能。

色彩的几种运算方式：

1.色彩的平移运算

1）增加色彩饱和度

色彩的平移运算实际上就是色彩的加法运算，其实就是在色彩变换矩阵的最后一列加上某个值，这样可以增加特定色彩的饱和度。

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
});

在绿色值上添加增量50，即增大绿色的饱和度。效果如下：

在应用ColorMatrix类后，图片中每个像素的绿色值都增加了50，从小狗的脸上也可以看出来。

2）色彩反转/反相功能

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
});

2.色彩的缩放运算

1）调节高度

色彩的缩放运算其实就是色彩的乘法运算。将色彩变换矩阵对角线上分别代表R、G、B、A的几个值分别乘以指定的值，就是所谓的缩放运算，如下图所示。

我们可以针对某个颜色值进行放大/缩小运算。但是当对R、G、B、A同时进行放大/缩小运算时，就是对亮度进行调节。

将亮度增大1.2倍的代码：

ColorMatrix colorMatrix = new ColorMatrix(new float[] {
	1.2f,    0,    0,    0, 0,
	   0, 1.2f,    0,    0, 50,
	   0,    0, 1.2f,    0, 0,
	   0,    0,    0, 1.2f, 0
});

2）通道输出

由于在色彩变换矩阵中对角线上的数的取值范围为0~1，所以，当取0时，这个色彩就完全不显示；当R、G都取0，而独有B取1时，就只显示蓝色，所形成的图像也就是我们通常所说的蓝色通道。看一下几个通道输出的效果图，如下图所示。

红色通道矩阵：

// 红色通道矩阵
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
});
// 绿色通道矩阵
ColorMatrix colorMatrix = new ColorMatrix (new float [] {
	0, 0, 0, 0, 0,
	0, 1, 0, 0, 0,
	0, 0, 0, 0, 0,
	0, 0, 0, 1, 0
});
// 蓝色通道矩阵
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
});

3.色彩的旋转运算

RGB色是如何旋转的呢？首先用R、G、B三色建立立体坐标系，如下图所示。

所以，我们可以把一个色彩值看成三维空间里的一个点，色彩值的三个分量可以看成该点的坐标(三维坐标)。我们先不考虑在三个维度综合情况下是怎么旋转的，来看看将某个轴作为Z轴，在另外两个轴形成的平面上旋转的情况。下图分析了将蓝色轴作为Z轴，仅在红一绿平面上旋转a度的情况。

（1）绕蓝色轴旋转 $\theta$ 度。

对应的色彩变换矩阵：

（2）绕红色轴旋转 $\theta$ 度。

对应的色彩变换矩阵：

（3）绕绿色轴旋转 $\theta$ 度。

对应的色彩变换矩阵：

当围绕红色轴进行色彩旋转时，由于当前红色轴的色彩是不变的，而仅利用三角函数来动态变更绿色和蓝色的颜色值，这种改变就叫作色相调节。当围绕红色轴旋转时，是对图片进行红色色相的调节；当围绕蓝色轴旋转时，是对图片进行蓝色色相的调节；当围绕绿色轴旋转时，是对图片进行绿色色相的调节。

4.色彩的投射运算

先回过头看看色彩变换矩阵运算的公式，如下：

在上式中，把红色运算单独标记出来，在运算中，它们就是利用G、B、A的颜色值的分量来增加红色值的。
来看具体的运算：

注意：最终结果的220=0.2x100+1x200，可见绿色分量在原有绿色分量的基础上增加了红色分量值的0.2倍。利用其他色彩分量的倍数来更改自己色彩分量的值，这种运算就叫作投射运算。

在对下图中阴影部分的值进行修改时，所使用的增加值来自其他色彩分量的信息。

应用一：黑白图片

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
});

首先了解一下去色原理：只要把R、G、B三通道的色彩信息设置成一样，即R=G=B, 图像就变成了灰色。并且，为了保证图像亮度不变，同一个通道中的R+G+B=1，如0.213+0.715+0.072=1。

下面谈一下0.213、0.715、0.072这三个数字的由来。
按理说应该把R、G、B平分，都是0.3333333。三个数字应该是根据色彩光波频率及色彩心理学计算出来的。

在作用于人眼的光线中，彩色光要明显强于无色光。如果对一张图像按RGB平分理论给图像去色，人眼就会明显感觉到图像变暗了(当然可能有心理上的原因，也有光波的科学依据)。另外，在彩色图像中能够识别的一些细节也可能会丢失。

所以Google最终给出的颜色值就是上面的三个数字: 0.213、 0.715、0.072。我们在给图像去色时保留了大量的G通道信息，使得图像不至于变暗或者绿色信息不至于丢失。

应用二：色彩反色

利用色彩变换矩阵将两个颜色反转，这种操作就叫作色彩反色。比如，将红色和绿色反色(红绿反色)，代码如下：

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
}) ;

从色彩变换矩阵中可以看出，红绿反色的关键在于，第一行用绿色来代替红色，第二行用红色来代替绿色。类似的可以有红蓝反色、绿蓝反色等，对应矩阵难度不大，就不再细讲了。

应用三：照片变旧

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
});

ColorMatrix函数：

在Android中，ColorMatrix自带一些函数，用来帮助我们完成调整饱和度、色彩旋转等操作。

1.构造函数

ColorMatrix()
ColorMatrix(float[] src)
ColorMatrix(ColorMatrix src)

在这三个构造函数中，我们已经使用过第二个构造函数；至于第三个构造函数，就是利用另一个ColorMatrix实例来复制一个一样的ColorMatrix对象。

2.设置和重置函数

public void set(ColorMatrix src)
public void set(float[] src)
public void reset()

上面的函数是设置和重置函数，重置后，对应的数组如下：

Set this colormatrix to identity:
[1 0 0 0 0  ←red vector
 0 1 0 0 0  ←green vector
 0 0 1 0 0  ←blue vector
 0 0 0 1 0] ←alpha vector

3.setSaturation()函数——设置饱和度

我们可以通过色彩的平移运算单独增强R、G、B其中一个分量的饱和度，但当我们需要整体增强色彩饱和度时，需要如何来做呢？ColorMatrix提供了一个函数来整体增强色彩饱和度，如下：

// 整体增强色彩饱和度，即同时增强R、G、B的色彩饱和度
public void setSaturation(float sat)
● sat：表示把当前色彩饱和度放大的倍数。取值0时，表示完全无色彩，即黑白图像；
       当取值1时，表示色彩不变动；当取值大于1时，显示色彩过度饱和。

举个例子：滑块默认在1倍的位置，向左到底是0，向右到底是20 (饱和度放大20倍)。

public class MyActivity extends Activity {
    private SeekBar mSeekBar;
    private ImageView mImageView;
    private Bitmap mOriginBmp, mTempBmp;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mImageView = (ImageView) findViewById(R.id.img);
        mSeekBar = (SeekBar) findViewById(R.id.seekbar);
        mOriginBmp = BitmapFactory.decodeResource(getResources(), R.drawable.dog);
        mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);

        mSeekBar.setMax(20);
        mSeekBar.setProgress(1);
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Bitmap bitmap = handleColorMatrixBmp(progress);
                mImageView.setImageBitmap(bitmap);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
    }

    private Bitmap  handleColorMatrixBmp(int progress){
        // 创建一个相同尺寸的可变的位图区,用于绘制调色后的图片
        Canvas canvas = new Canvas(mTempBmp); // 得到画笔对象
        Paint paint = new Paint(); // 新建paint
        paint.setAntiAlias(true); // 设置抗锯齿,也即是边缘做平滑处理
        ColorMatrix mSaturationMatrix = new ColorMatrix();

        mSaturationMatrix.setSaturation(progress);

        paint.setColorFilter(new ColorMatrixColorFilter(mSaturationMatrix));// 设置颜色变换效果
        canvas.drawBitmap(mOriginBmp, 0, 0, paint); // 将颜色变化后的图片输出到新创建的位图区
        // 返回新的位图，也即调色处理后的图片
        return mTempBmp;
    }
}

4.setScale()函数——色彩缩放

public void setScale(float rScale, float gScale, float bScale, float aScale)
● 4个参数分别对应R、G、B、A颜色值的缩放倍数。

比如，在小狗图片中，绿色占大部分，所以我们仅将绿色放大1.3倍。

canvas.drawBitmap(bitmap, null, new Rect(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth()), mPaint);
canvas.save();
canvas.translate(510, 0);
//生成色彩变换矩阵
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setScale(1, 1.3f, 1, 1);
mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
canvas.drawBitmap(bitmap, null, new Rect(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth()), mPaint);

注：canvas.save()使得之前的位图不会被translate(偏移)。我们知道每调用drawXXX，都产生一个新图层。

5.setRotate()函数——色彩旋转

上面在讲解色彩旋转运算时，列出了在色彩旋转时的效果和原理。由于涉及正、余弦函数的计算，而且这些公式推导起来具有一定的难度，所以Android 已经封装好了色彩旋转的函数。

public void setRotate(int axis, float degree)
● axis：将旋转围绕某一个颜色轴进行。
        取值有：0 围绕红色轴旋转；1 围绕绿色轴旋转；2 围绕蓝色轴旋转
● degree：旋转的角度

来看一下当围绕某一个颜色轴旋转时色相变化的效果。

代码与调节饱和度的代码只有两点不同。

(1)设置SeekBar的范围
mSeekBar.setMax(360);
mSeekBar.setProgress(180);

(2)在handleColorRotateBmp()函数中处理当前progress
ColorMatrix colorMatirx = new ColorMatrix();
colorMatrix.setRotate(0, progress - 180);
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));

同理，围绕绿色轴旋转的效果为：

ColorMatrix相乘：

public void setConcat(ColorMatrix matA, ColorMatrix matB)
● 函数接收两个ColorMatrix矩阵matA和matB，乘法规则：matA×matB，将结果作为当前ColorMatirx的值。
public void preConcat(ColorMatrix prematrix)
● 含义就是：当前矩阵A × prematrix
public void postConcat(ColorMatrix postmatrix)
● 含义就是：postmatrix × 当前矩阵A