写个Demo 来理解 Matrix

由于技术有限，各位大婶多多谅解。

首先写个Demo

效果

代码

public class Matrix52View extends View
{

    float[] dst = new float[2];
    float[] src = {
            0, 0,//起始点的坐标
    };

    Bitmap mBitmap;
    Matrix mMatrix;
    Paint mPaint;

    public Matrix52View(Context context)
    {
        this(context, null);
    }

    public Matrix52View(Context context, @Nullable AttributeSet attrs)
    {
        super(context, attrs);
        //加载Bitmap
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a);
        //对src 进行复制
        dst = src.clone();
        //初始化矩阵
        mMatrix = new Matrix();
        mMatrix.setPolyToPoly(src, 0, dst, 0, 1);
        //初始化画笔
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        绘制Src区域(canvas);
        绘制Dst区域(canvas);
        canvas.concat(mMatrix);
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }


    private void 绘制Src区域(Canvas canvas)
    {
        mPaint.setColor(Color.BLACK);
        //绘制 src 原始形状
        canvas.drawRect(src[0], src[1], mBitmap.getWidth(), mBitmap.getHeight(), mPaint);
        //绘制 src 与 dst 改变的距离
        canvas.drawLine(src[0], src[1], dst[0], dst[1], mPaint);
    }

    private void 绘制Dst区域(Canvas canvas)
    {
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(10);
        canvas.drawRect(dst[0], dst[1], dst[0] + mBitmap.getWidth(), dst[1] + mBitmap.getHeight(), mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        //根据触摸改变 矩阵
        dst[0] = event.getX();
        dst[1] = event.getY();
        mMatrix.setPolyToPoly(src, 0, dst, 0, 1);

        //重绘 View
        invalidate();
        return true;
    }
}

简单叙述一下代码
1. 首先初始化 Bitmap ，初始化 Matrix ，然后通过 setPolyToPoly 来使用 Matrix。
2. 如果你不熟悉 setPolyToPoly ，建议先看 这篇文章 中 setPolyToPoly 部分进行学习。
3. 在 onDraw 方法中 首先绘制了src中Bitmap的轮廓和位置 ，并且又绘制了一条线连接了dst改变(平移)后的位置
4. 绘制矩阵改变后的(dst)Bitmap的轮廓和位置
5. 将处理后的mMatrix 应用到 canvas 之中，绘制Bitmap
6. 最后根据触摸点改变 dst 的坐标

然后进行裁剪

代码如下

//...
    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        绘制Src区域(canvas);
        绘制Dst区域(canvas);
        裁剪画布(canvas);
        canvas.concat(mMatrix);
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }

    private void 裁剪画布(Canvas canvas)
    {
        int x = canvas.getWidth() / 3;
        int y = canvas.getHeight() / 3;
        mPaint.setStrokeWidth(3);
        mPaint.setColor(Color.GREEN);
        //绘制裁剪区域
        canvas.drawRect(x, y, x * 2, y * 2, mPaint);
        //裁剪
        canvas.clipRect(x, y, x * 2, y * 2);
    }
//...

效果也如下

可以看见 Bitmap的显示收到了制裁

如果我们把裁剪放在 canvas.concat 之后

//...
    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        绘制Src区域(canvas);
        绘制Dst区域(canvas);
        canvas.concat(mMatrix);
        裁剪画布(canvas);
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }
//...

效果如下

可以发现画布的裁剪区域与 Matrix 一起发生了变化。

如果我们把 绘制Dst区域 也放在 canvas.concat 之后

//...
    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        绘制Src区域(canvas);
        canvas.concat(mMatrix);
        绘制Dst区域(canvas);
        裁剪画布(canvas);
        canvas.drawBitmap(mBitmap, mMatrix, null);
    }
//...

注意这里 canvas.drawBitmap(mBitmap, mMatrix, null); 这行代码
也就是说 mBitmap 其实是移动了两份 mMatrix ，而裁剪区域只移动了一份。

效果是这样的

最后

这个Demo目的是帮助自己，也是帮助各位看官 理解 矩阵 。
如果达到效果，那么我很开心O(∩_∩)O~~
如果没有达到效果说明我这篇文章写得好不够好 (；′⌒`)
我会再接再厉的 (ง •̀_•́)ง