写个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~~
如果没有达到效果说明我这篇文章写得好不够好 (；′⌒`)
我会再接再厉的 (ง •̀_•́)ง